<template>
  <div class="app-container">
    <div class="wh_body">
      <div class="wh_theader" id="wh_theader">

        <a v-for="item of dataList"
           :key="item.id"
           @click="tabActive = item.id; changeTab"
           href="javascript:;"
           :class="[tabActive === item.id ? 'selected' : '']">{{item.name}}</a>
        <a @click="tabActive = 0; changeTab" href="javascript:;" class="customize"
           :class="[tabActive === 0 ? 'selected' : '']"><span>自定义</span>
          <span id="customize">2.35:1</span></a>
        <span class="iconfont" id="settings" @click="showAlert">👇</span>
      </div>

      <div class="wh_middle">
        <div class="wh_middleInner wh_widthClose">
          <span class="wh_w">宽度</span>
          <input id="width" type="text" placeholder="请输入数字"
                 @keyup="widthKeyUp"
                 v-model="width"/>
        </div>
        <div class="wh_middleInner">
          <span class="wh_h">高度</span>
          <input id="height" type="text" placeholder="请输入数字"
                 @keyup="heightKeyUp"
                 v-model="height"/>
        </div>
      </div>
      <div id="settingWindow" class="settingWindow">
        <div class="settingsWindowInner">
          <p>请设置宽高比</p>
          <div class="rowFlex">
            <input type="text" id="firstNum" value=""/>
            <span class="maohao">:</span>
            <input type="text" id="secondNum" value=""/>
          </div>
          <div class="rowFlex">
            <a href="javascript:;" class="wh_ok" id="wh_ok" @click="alertConfirm">确定</a>
            <a href="javascript:;" class="wh_cancel" id="wh_cancel" @click="alertCancel">取消</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import $ from 'jquery'

export default {
  name: 'width-height-convert',
  components: {},
  data() {
    return {
      tabActive: 1,
      width: null,
      height: null,
      dataList: [
        {id: 1, name: "2:1", width: 2, height: 1},
        {id: 2, name: "16:9", width: 16, height: 9},
        {id: 3, name: "21:9", width: 21, height: 9},
        {id: 4, name: "4:3", width: 4, height: 3},
        {id: 5, name: "1.618:1", width: 1.618, height: 1},
        {id: 6, name: "1.414:1", width: 1.414, height: 1}
      ]
    }
  },
  computed: {},
  created() {


  },
  mounted() {
  },
  methods: {
    alertConfirm() {
      //正数或者小数;
      var reg = /^\d+(\.\d+)?$/;
      var firstNum = $('#firstNum').val().trim();
      var secondNum = $('#secondNum').val().trim();
      if(!reg.test(firstNum)){
        $('#firstNum').focus();
        alert('宽度比必须输入数字');
        return;
      }
      if(!reg.test(secondNum)){
        $('#secondNum').focus();
        alert('高度比必须输入数字');
        return;
      }
      $('#customize').text(firstNum + ':' + secondNum);
      $('#settingWindow').css({display: 'none'});
      $('#wh_theader a').removeClass('selected');
      $('#wh_theader a:eq(5)').addClass('selected');
      this.changeTab();
    },
    alertCancel() {
      $('#settingWindow').css({display: 'none'});
    },
    showAlert() {
      $('#settingWindow').css({display: 'block'});
      var obj = this.getCustomize();
      $('#firstNum').val(obj.num1);
      $('#secondNum').val(obj.num2);
    },
    widthKeyUp(val) {
      console.log('width=', val)
      var w = Number(this.width);
      var h = w / this.returnRatio('w');
      console.log('得出的高 ', h)
      $('#height').val(h.toFixed(3));
    },
    heightKeyUp({key}) {
      var h = Number(this.height);
      var w = h / this.returnRatio('h');
      console.log('得出的宽 ', w)
      $('#width').val(w.toFixed(3));
    },
    changeTab() {
      var w = $('#width').val();
      if (/\d/.test(w)) {
        w = Number(w);
        var h = w / this.returnRatio('w');
        $('#height').val(h.toFixed());
      }
    },
    returnRatio(str) {
      var index = $('#wh_theader a.selected').index();
      const {tabActive} = this;
      const obj1 = this.dataList.find(item => item.id === tabActive);
      if (str == 'w') {
        if (tabActive === 0) {
          var obj = this.getCustomize();
          return obj.num1 / obj.num2;
        }
        const {width, height} = obj1;
        return width / height;
      } else if (str == 'h') {
        if (tabActive === 0) {
          var obj = this.getCustomize();
          return obj.num2 / obj.num1;
        }
        const {width, height} = obj1;
        return height / width;
      }
    },
    getCustomize() {
      var v = $('#customize').text();
      var arr = v.split(':');
      var v1 = Number(arr[0]);
      var v2 = Number(arr[1]);
      return {
        num1: v1,
        num2: v2
      };
    }
  },

}
</script>

<style scoped>
@import "../../assets/styles/index.css";

.app-container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #2562dc;
}


@font-face {
}

.padding5 {
  padding: 5px;
}

.margin5 {
  margin: 5px;
}

.pT5 {
  padding-top: 5px;
}

.pR5 {
  padding-right: 5px;
}

.mR25 {
  margin-right: 25px;
}

.mB25 {
  margin-bottom: 25px;
}

.mL25 {
  margin-left: 25px;
}

.padding5 {
  padding: 5px;
}

.margin5 {
  margin: 5px;
}

.pT5 {
  padding-top: 5px;
}

.pR5 {
  padding-right: 5px;
}

.pB5 {
  padding-bottom: 5px;
}

.pL5 {
  padding-left: 5px;
}

.mT5 {
  margin-top: 5px;
}

.mR5 {
  margin-right: 5px;
}

.mB5 {
  margin-bottom: 5px;
}

.mL5 {
  margin-left: 5px;
}

.padding6 {
  padding: 6px;
}

.margin6 {
  margin: 6px;
}

.pT6 {
  padding-top: 6px;
}

.pR6 {
  padding-right: 6px;
}

.pB6 {
  padding-bottom: 6px;
}

.pL6 {
  padding-left: 6px;
}

.mT6 {
  margin-top: 6px;
}

.mR6 {
  margin-right: 6px;
}

.mB6 {
  margin-bottom: 6px;
}

.mL6 {
  margin-left: 6px;
}

.padding35 {
  padding: 35px;
}

.margin35 {
  margin: 35px;
}

.pT35 {
  padding-top: 35px;
}

.pR35 {
  padding-right: 35px;
}

.pB35 {
  padding-bottom: 35px;
}

.pL35 {
  padding-left: 35px;
}

.mT35 {
  margin-top: 35px;
}

.mR35 {
  margin-right: 35px;
}

.mB35 {
  margin-bottom: 35px;
}

.mL35 {
  margin-left: 35px;
}

.padding7 {
  padding: 7px;
}

.margin7 {
  margin: 7px;
}

.pT7 {
  padding-top: 7px;
}

.pR7 {
  padding-right: 7px;
}

.pB7 {
  padding-bottom: 7px;
}

.pL7 {
  padding-left: 7px;
}

.mT7 {
  margin-top: 7px;
}

.mR7 {
  margin-right: 7px;
}

.mB7 {
  margin-bottom: 7px;
}

.mL7 {
  margin-left: 7px;
}

.padding8 {
  padding: 8px;
}

.margin8 {
  margin: 8px;
}

.pT8 {
  padding-top: 8px;
}

.pR8 {
  padding-right: 8px;
}

.pB8 {
  padding-bottom: 8px;
}

.pL8 {
  padding-left: 8px;
}

.mT8 {
  margin-top: 8px;
}

.mR8 {
  margin-right: 8px;
}

.mB8 {
  margin-bottom: 8px;
}

.mL8 {
  margin-left: 8px;
}

.padding45 {
  padding: 45px;
}

.margin45 {
  margin: 45px;
}

.pT45 {
  padding-top: 45px;
}

.pR45 {
  padding-right: 45px;
}

.pB45 {
  padding-bottom: 45px;
}

.pL45 {
  padding-left: 45px;
}

.mT45 {
  margin-top: 45px;
}

.mR45 {
  margin-right: 45px;
}

.mB45 {
  margin-bottom: 45px;
}

.mL45 {
  margin-left: 45px;
}

.padding9 {
  padding: 9px;
}

.margin9 {
  margin: 9px;
}

.pT9 {
  padding-top: 9px;
}

.pR9 {
  padding-right: 9px;
}

.pB9 {
  padding-bottom: 9px;
}

.pL9 {
  padding-left: 9px;
}

.mT9 {
  margin-top: 9px;
}

.mR9 {
  margin-right: 9px;
}

.mB9 {
  margin-bottom: 9px;
}

.mL9 {
  margin-left: 9px;
}

.padding10 {
  padding: 10px;
}

.margin10 {
  margin: 10px;
}

.pT10 {
  padding-top: 10px;
}

.pR10 {
  padding-right: 10px;
}

.pB10 {
  padding-bottom: 10px;
}

.pL10 {
  padding-left: 10px;
}

.mT10 {
  margin-top: 10px;
}

.mR10 {
  margin-right: 10px;
}

.mB10 {
  margin-bottom: 10px;
}

.mL10 {
  margin-left: 10px;
}

.padding55 {
  padding: 55px;
}

.margin55 {
  margin: 55px;
}

.pT55 {
  padding-top: 55px;
}

.pR55 {
  padding-right: 55px;
}

.pB55 {
  padding-bottom: 55px;
}

.pL55 {
  padding-left: 55px;
}

.mT55 {
  margin-top: 55px;
}

.mR55 {
  margin-right: 55px;
}


.pL75 {
  padding-left: 75px;
}

.mT75 {
  margin-top: 75px;
}

.mR75 {
  margin-right: 75px;
}

.mB75 {
  margin-bottom: 75px;
}

.mL75 {
  margin-left: 75px;
}

.padding15 {
  padding: 15px;
}

.margin15 {
  margin: 15px;
}

.pT15 {
  padding-top: 15px;
}

.pR15 {
  padding-right: 15px;
}

.pB15 {
  padding-bottom: 15px;
}

.pL15 {
  padding-left: 15px;
}

.mT15 {
  margin-top: 15px;
}

.mR15 {
  margin-right: 15px;
}

.mB15 {
  margin-bottom: 15px;
}

.mL15 {
  margin-left: 15px;
}

.padding16 {
  padding: 16px;
}

.margin16 {
  margin: 16px;
}

.pT16 {
  padding-top: 16px;
}

.pR16 {
  padding-right: 16px;
}

.pB16 {
  padding-bottom: 16px;
}

.pL16 {
  padding-left: 16px;
}

.mT16 {
  margin-top: 16px;
}

.mR16 {
  margin-right: 16px;
}

.mB16 {
  margin-bottom: 16px;
}

.mL16 {
  margin-left: 16px;
}

.padding85 {
  padding: 85px;
}

.margin85 {
  margin: 85px;
}

.pT85 {
  padding-top: 85px;
}

.pR85 {
  padding-right: 85px;
}

.pB85 {
  padding-bottom: 85px;
}

.pL85 {
  padding-left: 85px;
}

.mT85 {
  margin-top: 85px;
}

.mR85 {
  margin-right: 85px;
}

.mB85 {
  margin-bottom: 85px;
}

.mL85 {
  margin-left: 85px;
}

.padding17 {
  padding: 17px;
}

.margin17 {
  margin: 17px;
}

.pT17 {
  padding-top: 17px;
}

.pR17 {
  padding-right: 17px;
}

.pB17 {
  padding-bottom: 17px;
}

.pL17 {
  padding-left: 17px;
}

.mT17 {
  margin-top: 17px;
}

.mR17 {
  margin-right: 17px;
}

.mB17 {
  margin-bottom: 17px;
}

.mL17 {
  margin-left: 17px;
}

.padding18 {
  padding: 18px;
}

.margin18 {
  margin: 18px;
}

.pT18 {
  padding-top: 18px;
}

.pR18 {
  padding-right: 18px;
}

.pB18 {
  padding-bottom: 18px;
}

.pL18 {
  padding-left: 18px;
}

.mT18 {
  margin-top: 18px;
}

.mR18 {
  margin-right: 18px;
}

.mB18 {
  margin-bottom: 18px;
}

.mL18 {
  margin-left: 18px;
}

.padding95 {
  padding: 95px;
}

.margin95 {
  margin: 95px;
}

.pT95 {
  padding-top: 95px;
}

.pR95 {
  padding-right: 95px;
}

.pB95 {
  padding-bottom: 95px;
}

.pL95 {
  padding-left: 95px;
}

.mT95 {
  margin-top: 95px;
}

.mR95 {
  margin-right: 95px;
}

.mB95 {
  margin-bottom: 95px;
}

.mL95 {
  margin-left: 95px;
}

.padding19 {
  padding: 19px;
}

.margin19 {
  margin: 19px;
}

.pT19 {
  padding-top: 19px;
}

.pR19 {
  padding-right: 19px;
}

.pB19 {
  padding-bottom: 19px;
}

.pL19 {
  padding-left: 19px;
}

.mT19 {
  margin-top: 19px;
}

.mR19 {
  margin-right: 19px;
}

.mB19 {
  margin-bottom: 19px;
}

.mL19 {
  margin-left: 19px;
}

.padding20 {
  padding: 20px;
}

.margin20 {
  margin: 20px;
}

.pT20 {
  padding-top: 20px;
}

.pR20 {
  padding-right: 20px;
}

.pB20 {
  padding-bottom: 20px;
}

.pL20 {
  padding-left: 20px;
}

.mT20 {
  margin-top: 20px;
}

.mR20 {
  margin-right: 20px;
}

.mB20 {
  margin-bottom: 20px;
}

.mL20 {
  margin-left: 20px;
}

.pT0 {
  padding-top: 0px;
}

.pR0 {
  padding-right: 0px;
}

.pB0 {
  padding-bottom: 0px;
}

.pL0 {
  padding-left: 0px;
}

.mT0 {
  margin-top: 0px;
}

.mR0 {
  margin-right: 0px;
}

.mB0 {
  margin-bottom: 0px;
}

.mL0 {
  margin-left: 0px;
}

.pT10 {
  padding-top: 10px;
}

.pR10 {
  padding-right: 10px;
}

.pB10 {
  padding-bottom: 10px;
}

.pL10 {
  padding-left: 10px;
}

.mT10 {
  margin-top: 10px;
}

.mR10 {
  margin-right: 10px;
}

.mB10 {
  margin-bottom: 10px;
}

.mL10 {
  margin-left: 10px;
}

.pT20 {
  padding-top: 20px;
}

.pR20 {
  padding-right: 20px;
}

.pB20 {
  padding-bottom: 20px;
}

.pL20 {
  padding-left: 20px;
}

.mT20 {
  margin-top: 20px;
}

.mR20 {
  margin-right: 20px;
}

.mB20 {
  margin-bottom: 20px;
}

.mL20 {
  margin-left: 20px;
}

.pT30 {
  padding-top: 30px;
}

.pR30 {
  padding-right: 30px;
}

.pB30 {
  padding-bottom: 30px;
}

.pL30 {
  padding-left: 30px;
}

.mT30 {
  margin-top: 30px;
}

.mR30 {
  margin-right: 30px;
}

.mB30 {
  margin-bottom: 30px;
}

.mL30 {
  margin-left: 30px;
}

.pT40 {
  padding-top: 40px;
}

.pR40 {
  padding-right: 40px;
}

.pB40 {
  padding-bottom: 40px;
}

.pL40 {
  padding-left: 40px;
}

.mT40 {
  margin-top: 40px;
}

.mR40 {
  margin-right: 40px;
}

.mB40 {
  margin-bottom: 40px;
}

.mL40 {
  margin-left: 40px;
}

.pT50 {
  padding-top: 50px;
}

.pR50 {
  padding-right: 50px;
}

.pB50 {
  padding-bottom: 50px;
}

.pL50 {
  padding-left: 50px;
}

.mT50 {
  margin-top: 50px;
}

.mR50 {
  margin-right: 50px;
}

.mB50 {
  margin-bottom: 50px;
}

.mL50 {
  margin-left: 50px;
}

.pT60 {
  padding-top: 60px;
}

.pR60 {
  padding-right: 60px;
}

.pB60 {
  padding-bottom: 60px;
}

.pL60 {
  padding-left: 60px;
}

.mT60 {
  margin-top: 60px;
}

.mR60 {
  margin-right: 60px;
}

.mB60 {
  margin-bottom: 60px;
}

.mL60 {
  margin-left: 60px;
}

.pT70 {
  padding-top: 70px;
}

.pR70 {
  padding-right: 70px;
}

.pB70 {
  padding-bottom: 70px;
}

.pL70 {
  padding-left: 70px;
}

.mT70 {
  margin-top: 70px;
}

.mR70 {
  margin-right: 70px;
}

.mB70 {
  margin-bottom: 70px;
}

.mL70 {
  margin-left: 70px;
}

.pT80 {
  padding-top: 80px;
}

.pR80 {
  padding-right: 80px;
}

.pB80 {
  padding-bottom: 80px;
}

.pL80 {
  padding-left: 80px;
}

.mT80 {
  margin-top: 80px;
}

.mR80 {
  margin-right: 80px;
}

.mB80 {
  margin-bottom: 80px;
}

.mL80 {
  margin-left: 80px;
}

.pT90 {
  padding-top: 90px;
}

.pR90 {
  padding-right: 90px;
}

.pB90 {
  padding-bottom: 90px;
}

.pL90 {
  padding-left: 90px;
}

.mT90 {
  margin-top: 90px;
}

.mR90 {
  margin-right: 90px;
}

.mB90 {
  margin-bottom: 90px;
}

.mL90 {
  margin-left: 90px;
}

.pT100 {
  padding-top: 100px;
}

.pR100 {
  padding-right: 100px;
}

.pB100 {
  padding-bottom: 100px;
}

.pL100 {
  padding-left: 100px;
}

.mT100 {
  margin-top: 100px;
}

.mR100 {
  margin-right: 100px;
}

.mB100 {
  margin-bottom: 100px;
}

.mL100 {
  margin-left: 100px;
}

.pT110 {
  padding-top: 110px;
}

.pR110 {
  padding-right: 110px;
}

.pB110 {
  padding-bottom: 110px;
}

.pL110 {
  padding-left: 110px;
}

.mT110 {
  margin-top: 110px;
}

.mR110 {
  margin-right: 110px;
}

.mB110 {
  margin-bottom: 110px;
}

.mL110 {
  margin-left: 110px;
}

.pT120 {
  padding-top: 120px;
}

.pR120 {
  padding-right: 120px;
}

.pB120 {
  padding-bottom: 120px;
}

.pL120 {
  padding-left: 120px;
}

.mT120 {
  margin-top: 120px;
}

.mR120 {
  margin-right: 120px;
}

.mB120 {
  margin-bottom: 120px;
}

.mL120 {
  margin-left: 120px;
}

.pT130 {
  padding-top: 130px;
}

.pR130 {
  padding-right: 130px;
}

.pB130 {
  padding-bottom: 130px;
}

.pL130 {
  padding-left: 130px;
}

.mT130 {
  margin-top: 130px;
}

.mR130 {
  margin-right: 130px;
}

.mB130 {
  margin-bottom: 130px;
}

.mL130 {
  margin-left: 130px;
}

.pT140 {
  padding-top: 140px;
}

.pR140 {
  padding-right: 140px;
}

.pB140 {
  padding-bottom: 140px;
}

.pL140 {
  padding-left: 140px;
}

.mT140 {
  margin-top: 140px;
}

.mR140 {
  margin-right: 140px;
}

.mB140 {
  margin-bottom: 140px;
}

.mL140 {
  margin-left: 140px;
}

.pT150 {
  padding-top: 150px;
}

.pR150 {
  padding-right: 150px;
}

.pB150 {
  padding-bottom: 150px;
}

.pL150 {
  padding-left: 150px;
}

.mT150 {
  margin-top: 150px;
}

.mR150 {
  margin-right: 150px;
}

.mB150 {
  margin-bottom: 150px;
}

.mL150 {
  margin-left: 150px;
}

.pT160 {
  padding-top: 160px;
}

.pR160 {
  padding-right: 160px;
}

.pB160 {
  padding-bottom: 160px;
}

.pL160 {
  padding-left: 160px;
}

.mT160 {
  margin-top: 160px;
}

.mR160 {
  margin-right: 160px;
}

.mB160 {
  margin-bottom: 160px;
}

.mL160 {
  margin-left: 160px;
}

.pT170 {
  padding-top: 170px;
}

.pR170 {
  padding-right: 170px;
}

.pB170 {
  padding-bottom: 170px;
}

.pL170 {
  padding-left: 170px;
}

.mT170 {
  margin-top: 170px;
}

.mR170 {
  margin-right: 170px;
}

.mB170 {
  margin-bottom: 170px;
}

.mL170 {
  margin-left: 170px;
}

.pT180 {
  padding-top: 180px;
}

.pR180 {
  padding-right: 180px;
}

.pB180 {
  padding-bottom: 180px;
}

.pL180 {
  padding-left: 180px;
}

.mT180 {
  margin-top: 180px;
}

.mR180 {
  margin-right: 180px;
}

.mB180 {
  margin-bottom: 180px;
}

.mL180 {
  margin-left: 180px;
}

.pT190 {
  padding-top: 190px;
}

.pR190 {
  padding-right: 190px;
}

.pB190 {
  padding-bottom: 190px;
}

.pL190 {
  padding-left: 190px;
}

.mT190 {
  margin-top: 190px;
}

.mR190 {
  margin-right: 190px;
}

.mB190 {
  margin-bottom: 190px;
}

.mL190 {
  margin-left: 190px;
}

.pT200 {
  padding-top: 200px;
}

.pR200 {
  padding-right: 200px;
}

.pB200 {
  padding-bottom: 200px;
}

.pL200 {
  padding-left: 200px;
}

.mT200 {
  margin-top: 200px;
}

.mR200 {
  margin-right: 200px;
}

.mB200 {
  margin-bottom: 200px;
}

.mL200 {
  margin-left: 200px;
}

.pT210 {
  padding-top: 210px;
}

.pR210 {
  padding-right: 210px;
}

.pB210 {
  padding-bottom: 210px;
}

.pL210 {
  padding-left: 210px;
}

.mT210 {
  margin-top: 210px;
}

.mR210 {
  margin-right: 210px;
}

.mB210 {
  margin-bottom: 210px;
}

.mL210 {
  margin-left: 210px;
}

.pT220 {
  padding-top: 220px;
}

.pR220 {
  padding-right: 220px;
}

.pB220 {
  padding-bottom: 220px;
}

.pL220 {
  padding-left: 220px;
}

.mT220 {
  margin-top: 220px;
}

.mR220 {
  margin-right: 220px;
}

.mB220 {
  margin-bottom: 220px;
}

.mL220 {
  margin-left: 220px;
}

.pT230 {
  padding-top: 230px;
}

.pR230 {
  padding-right: 230px;
}

.pB230 {
  padding-bottom: 230px;
}

.pL230 {
  padding-left: 230px;
}

.mT230 {
  margin-top: 230px;
}

.mR230 {
  margin-right: 230px;
}

.mB230 {
  margin-bottom: 230px;
}

.mL230 {
  margin-left: 230px;
}

.pT240 {
  padding-top: 240px;
}

.pR240 {
  padding-right: 240px;
}

.pB240 {
  padding-bottom: 240px;
}

.pL240 {
  padding-left: 240px;
}

.mT240 {
  margin-top: 240px;
}

.mR240 {
  margin-right: 240px;
}

.mB240 {
  margin-bottom: 240px;
}

.mL240 {
  margin-left: 240px;
}

.pT250 {
  padding-top: 250px;
}

.pR250 {
  padding-right: 250px;
}

.pB250 {
  padding-bottom: 250px;
}

.pL250 {
  padding-left: 250px;
}

.mT250 {
  margin-top: 250px;
}

.mR250 {
  margin-right: 250px;
}

.mB250 {
  margin-bottom: 250px;
}

.mL250 {
  margin-left: 250px;
}

.pT260 {
  padding-top: 260px;
}

.pR260 {
  padding-right: 260px;
}

.pB260 {
  padding-bottom: 260px;
}

.pL260 {
  padding-left: 260px;
}

.mT260 {
  margin-top: 260px;
}

.mR260 {
  margin-right: 260px;
}

.mB260 {
  margin-bottom: 260px;
}

.mL260 {
  margin-left: 260px;
}

.pT270 {
  padding-top: 270px;
}

.pR270 {
  padding-right: 270px;
}

.pB270 {
  padding-bottom: 270px;
}

.pL270 {
  padding-left: 270px;
}

.mT270 {
  margin-top: 270px;
}

.mR270 {
  margin-right: 270px;
}

.mB270 {
  margin-bottom: 270px;
}

.mL270 {
  margin-left: 270px;
}

.pT280 {
  padding-top: 280px;
}

.pR280 {
  padding-right: 280px;
}

.pB280 {
  padding-bottom: 280px;
}

.pL280 {
  padding-left: 280px;
}

.mT280 {
  margin-top: 280px;
}

.mR280 {
  margin-right: 280px;
}

.mB280 {
  margin-bottom: 280px;
}

.mL280 {
  margin-left: 280px;
}

.pT290 {
  padding-top: 290px;
}

.pR290 {
  padding-right: 290px;
}

.pB290 {
  padding-bottom: 290px;
}

.pL290 {
  padding-left: 290px;
}

.mT290 {
  margin-top: 290px;
}

.mR290 {
  margin-right: 290px;
}

.mB290 {
  margin-bottom: 290px;
}

.mL290 {
  margin-left: 290px;
}

.pT300 {
  padding-top: 300px;
}

.pR300 {
  padding-right: 300px;
}

.pB300 {
  padding-bottom: 300px;
}

.pL300 {
  padding-left: 300px;
}

.mT300 {
  margin-top: 300px;
}

.mR300 {
  margin-right: 300px;
}

.mB300 {
  margin-bottom: 300px;
}

.mL300 {
  margin-left: 300px;
}

.pT310 {
  padding-top: 310px;
}

.pR310 {
  padding-right: 310px;
}

.pB310 {
  padding-bottom: 310px;
}

.pL310 {
  padding-left: 310px;
}

.mT310 {
  margin-top: 310px;
}

.mR310 {
  margin-right: 310px;
}

.mB310 {
  margin-bottom: 310px;
}

.mL310 {
  margin-left: 310px;
}

.pT320 {
  padding-top: 320px;
}

.pR320 {
  padding-right: 320px;
}

.pB320 {
  padding-bottom: 320px;
}

.pL320 {
  padding-left: 320px;
}

.mT320 {
  margin-top: 320px;
}

.mR320 {
  margin-right: 320px;
}

.mB320 {
  margin-bottom: 320px;
}

.mL320 {
  margin-left: 320px;
}

.pT330 {
  padding-top: 330px;
}

.pR330 {
  padding-right: 330px;
}

.pB330 {
  padding-bottom: 330px;
}

.pL330 {
  padding-left: 330px;
}

.mT330 {
  margin-top: 330px;
}

.mR330 {
  margin-right: 330px;
}

.mB330 {
  margin-bottom: 330px;
}

.mL330 {
  margin-left: 330px;
}

.pT340 {
  padding-top: 340px;
}

.pR340 {
  padding-right: 340px;
}

.pB340 {
  padding-bottom: 340px;
}

.pL340 {
  padding-left: 340px;
}

.mT340 {
  margin-top: 340px;
}

.mR340 {
  margin-right: 340px;
}

.mB340 {
  margin-bottom: 340px;
}

.mL340 {
  margin-left: 340px;
}

.pT350 {
  padding-top: 350px;
}

.pR350 {
  padding-right: 350px;
}

.pB350 {
  padding-bottom: 350px;
}

.pL350 {
  padding-left: 350px;
}

.mT350 {
  margin-top: 350px;
}

.mR350 {
  margin-right: 350px;
}

.mB350 {
  margin-bottom: 350px;
}

.mL350 {
  margin-left: 350px;
}

.pT360 {
  padding-top: 360px;
}

.pR360 {
  padding-right: 360px;
}

.pB360 {
  padding-bottom: 360px;
}

.pL360 {
  padding-left: 360px;
}

.mT360 {
  margin-top: 360px;
}

.mR360 {
  margin-right: 360px;
}

.mB360 {
  margin-bottom: 360px;
}

.mL360 {
  margin-left: 360px;
}

.pT370 {
  padding-top: 370px;
}

.pR370 {
  padding-right: 370px;
}

.pB370 {
  padding-bottom: 370px;
}

.pL370 {
  padding-left: 370px;
}

.mT370 {
  margin-top: 370px;
}

.mR370 {
  margin-right: 370px;
}

.mB370 {
  margin-bottom: 370px;
}

.mL370 {
  margin-left: 370px;
}

.pT380 {
  padding-top: 380px;
}

.pR380 {
  padding-right: 380px;
}

.pB380 {
  padding-bottom: 380px;
}

.pL380 {
  padding-left: 380px;
}

.mT380 {
  margin-top: 380px;
}

.mR380 {
  margin-right: 380px;
}

.mB380 {
  margin-bottom: 380px;
}

.mL380 {
  margin-left: 380px;
}

.pT390 {
  padding-top: 390px;
}

.pR390 {
  padding-right: 390px;
}

.pB390 {
  padding-bottom: 390px;
}

.pL390 {
  padding-left: 390px;
}

.mT390 {
  margin-top: 390px;
}

.mR390 {
  margin-right: 390px;
}

.mB390 {
  margin-bottom: 390px;
}

.mL390 {
  margin-left: 390px;
}

.pT400 {
  padding-top: 400px;
}

.pR400 {
  padding-right: 400px;
}

.pB400 {
  padding-bottom: 400px;
}

.pL400 {
  padding-left: 400px;
}

.mT400 {
  margin-top: 400px;
}

.mR400 {
  margin-right: 400px;
}

.mB400 {
  margin-bottom: 400px;
}

.mL400 {
  margin-left: 400px;
}

.w10 {
  width: 10px;
}

.fz10 {
  font-size: 10px;
  font-size: 10px !important;
}

.w20 {
  width: 20px;
}

.fz20 {
  font-size: 20px;
  font-size: 20px !important;
}

.w30 {
  width: 30px;
}

.fz30 {
  font-size: 30px;
  font-size: 30px !important;
}

.w40 {
  width: 40px;
}

.fz40 {
  font-size: 40px;
  font-size: 40px !important;
}

.w50 {
  width: 50px;
}

.fz50 {
  font-size: 50px;
  font-size: 50px !important;
}

.w60 {
  width: 60px;
}

.fz60 {
  font-size: 60px;
  font-size: 60px !important;
}

.w70 {
  width: 70px;
}

.fz70 {
  font-size: 70px;
  font-size: 70px !important;
}

.w80 {
  width: 80px;
}

.fz80 {
  font-size: 80px;
  font-size: 80px !important;
}

.w90 {
  width: 90px;
}

.fz90 {
  font-size: 90px;
  font-size: 90px !important;
}

.w100 {
  width: 100px;
}

.fz100 {
  font-size: 100px;
  font-size: 100px !important;
}

.w110 {
  width: 110px;
}

.fz110 {
  font-size: 110px;
  font-size: 110px !important;
}

.w120 {
  width: 120px;
}

.fz120 {
  font-size: 120px;
  font-size: 120px !important;
}

.w130 {
  width: 130px;
}

.fz130 {
  font-size: 130px;
  font-size: 130px !important;
}

.w140 {
  width: 140px;
}

.fz140 {
  font-size: 140px;
  font-size: 140px !important;
}

.w150 {
  width: 150px;
}

.fz150 {
  font-size: 150px;
  font-size: 150px !important;
}

.w160 {
  width: 160px;
}

.fz160 {
  font-size: 160px;
  font-size: 160px !important;
}

.w170 {
  width: 170px;
}

.fz170 {
  font-size: 170px;
  font-size: 170px !important;
}

.w180 {
  width: 180px;
}

.fz180 {
  font-size: 180px;
  font-size: 180px !important;
}

.w190 {
  width: 190px;
}

.fz190 {
  font-size: 190px;
  font-size: 190px !important;
}

.w200 {
  width: 200px;
}

.fz200 {
  font-size: 200px;
  font-size: 200px !important;
}

.w210 {
  width: 210px;
}

.fz210 {
  font-size: 210px;
  font-size: 210px !important;
}

.w220 {
  width: 220px;
}

.fz220 {
  font-size: 220px;
  font-size: 220px !important;
}

.w230 {
  width: 230px;
}

.fz230 {
  font-size: 230px;
  font-size: 230px !important;
}

.w240 {
  width: 240px;
}

.fz240 {
  font-size: 240px;
  font-size: 240px !important;
}

.w250 {
  width: 250px;
}

.fz250 {
  font-size: 250px;
  font-size: 250px !important;
}

.w260 {
  width: 260px;
}

.fz260 {
  font-size: 260px;
  font-size: 260px !important;
}

.w270 {
  width: 270px;
}

.fz270 {
  font-size: 270px;
  font-size: 270px !important;
}

.w280 {
  width: 280px;
}

.fz280 {
  font-size: 280px;
  font-size: 280px !important;
}

.w290 {
  width: 290px;
}

.fz290 {
  font-size: 290px;
  font-size: 290px !important;
}

.w300 {
  width: 300px;
}

.fz300 {
  font-size: 300px;
  font-size: 300px !important;
}

.w310 {
  width: 310px;
}

.fz310 {
  font-size: 310px;
  font-size: 310px !important;
}

.w320 {
  width: 320px;
}

.w1000 {
  width: 1000px;
}

.fz1000 {
  font-size: 1000px;
  font-size: 1000px !important;
}

div ::-webkit-scrollbar, body ::-webkit-scrollbar, html ::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

div ::-webkit-scrollbar-track, body ::-webkit-scrollbar-track, html ::-webkit-scrollbar-track {
  background-color: #4a4a4a;
}

div ::-webkit-scrollbar-thumb, body ::-webkit-scrollbar-thumb, html ::-webkit-scrollbar-thumb {
  background-color: #696969;
}

div ::-webkit-scrollbar-thumb:hover, body ::-webkit-scrollbar-thumb:hover, html ::-webkit-scrollbar-thumb:hover {
  background-color: #696969;
}

div ::-webkit-scrollbar-thumb:active, body ::-webkit-scrollbar-thumb:active, html ::-webkit-scrollbar-thumb:active {
  background-color: #696969;
}

.fz34 {
  font-size: 34px;
}

.pL26 {
  padding-left: 26px;
}

body {
  font-size: 12px;
  background: #26282a;
}

a {
  line-height: 1em;
  text-decoration: none;
  color: #ddd;
}

.rowFlex {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-align-items: center;
  align-items: center;
}

h3 {
  clear: both;
  font-size: 16px;
  color: #fff;
  font-weight: bold;
  line-height: 1em;
  padding: 40px 0px 10px 0px;
}

.listItem {
  -moz-transition-property: all;
  -o-transition-property: all;
  -webkit-transition-property: all;
  transition-property: all;
  -moz-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
  -moz-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-justify-content: start;
  justify-content: start;
  position: relative;
  top: 0;
  left: 0;
  width: 250px;
  height: 86px;
  overflow: hidden;
  float: left;
  background: #3d4044;
  margin-bottom: 20px;
  margin-right: 16px;
  padding: 16px;
}

.listItem img {
  margin-right: 10px;
}

.listItem p {
  line-height: 1.2em;
}

.listItem p.itemTitle {
  font-size: 14px;
  font-weight: bold;
  padding-bottom: 8px;
  color: #fff;
  line-height: 1em;
}

.listItem:hover {
  background: #494d51;
  -moz-box-shadow: 0 26px 40px -24px rgba(2, 4, 6, 0.3);
  -webkit-box-shadow: 0 26px 40px -24px rgba(2, 4, 6, 0.3);
  box-shadow: 0 26px 40px -24px rgba(2, 4, 6, 0.3);
  top: -8px;
}

.navHeader {
  -moz-transition-property: all;
  -o-transition-property: all;
  -webkit-transition-property: all;
  transition-property: all;
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -moz-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  height: 78px;
  background: #2c2e2f;
  position: fixed;
  top: 0;
  left: 240px;
  right: 0px;
  z-index: 2;
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.navHeader .weather {
  height: 40px;
  overflow: hidden;
}

.navHeader .whTool {
  padding-left: 10px;
}

.navHeader .whTool:hover {
  color: #fff;
}

.navBody {
  -moz-transition-property: all;
  -o-transition-property: all;
  -webkit-transition-property: all;
  transition-property: all;
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -moz-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  padding-top: 78px;
  padding-left: 280px;
  padding-right: 10px;
}

body.close .navHeader {
  left: 86px;
}

body.close .navHeader .nav span {
  width: 12px;
  -moz-transform: rotateZ(45deg) translate(12px, -7px);
  -ms-transform: rotateZ(45deg) translate(12px, -7px);
  -webkit-transform: rotateZ(45deg) translate(12px, -7px);
  transform: rotateZ(45deg) translate(12px, -7px);
}

body.close .navHeader .nav span:first-child {
  width: 24px;
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}

body.close .navHeader .nav span:last-child {
  width: 12px;
  -moz-transform: rotateZ(-45deg) translate(12px, 7px);
  -ms-transform: rotateZ(-45deg) translate(12px, 7px);
  -webkit-transform: rotateZ(-45deg) translate(12px, 7px);
  transform: rotateZ(-45deg) translate(12px, 7px);
}

body.close .navBody {
  padding-left: 126px;
}

body.close .sideNav {
  width: 86px;
}

body.close .sideNav li a {
  text-align: center;
}

body.close .sideNav li a i.iconfont {
  font-size: 20px;
}

body.close .sideNav li a i.iconfont::after {
  margin-right: 0;
}

body.close .closeHidden {
  display: none;
}

.sideNav {
  width: 240px;
  height: 100vh;
  overflow: auto;
  background: #2c2e2f;
  position: fixed;
  z-index: 2;
  -moz-box-shadow: 10px 0 10px rgba(0, 0, 0, 0.05);
  -webkit-box-shadow: 10px 0 10px rgba(0, 0, 0, 0.05);
  box-shadow: 10px 0 10px rgba(0, 0, 0, 0.05);
  -moz-transition-property: all;
  -o-transition-property: all;
  -webkit-transition-property: all;
  transition-property: all;
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -moz-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
}

.sideNav li {
  position: relative;
}

.sideNav .current a {
  color: #00ffff;
}

.sideNav .current::after {
  content: '';
  width: 3px;
  height: 14px;
  background: #0ff;
  position: absolute;
  top: 12px;
  right: -12px;
}

.sideNav a {
  -moz-transition-property: all;
  -o-transition-property: all;
  -webkit-transition-property: all;
  transition-property: all;
  -moz-transition-duration: 0.7s;
  -o-transition-duration: 0.7s;
  -webkit-transition-duration: 0.7s;
  transition-duration: 0.7s;
  -moz-transition-timing-function: linear;
  -o-transition-timing-function: linear;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  word-break: keep-all;
  white-space: nowrap;
  display: block;
  padding: 12px 0px;
  margin: 0 16px;
  border-bottom: 1px solid #313437;
  color: #ddd;
  font-size: 14px;
}

.sideNav a:hover {
  color: #00ffff;
}

.sideNav a i {
  -moz-transition-property: all;
  -o-transition-property: all;
  -webkit-transition-property: all;
  transition-property: all;
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -moz-transition-timing-function: ease;
  -o-transition-timing-function: ease;
  -webkit-transition-timing-function: ease;
  transition-timing-function: ease;
}

.sideNav .logo {
  width: 100%;
  height: 78px;
  overflow: hidden;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-align-items: center;
  align-items: center;
  margin-bottom: 20px;
  font-weight: bold;
  font-size: 16px;
  color: #fff;
  word-break: keep-all;
  white-space: nowrap;
}

.sideNav .logo .slogen {
  font-size: 12px;
  color: #777;
  padding-top: 4px;
  font-weight: normal;
}

.nav {
  width: 78px;
  height: 78px;
  overflow: hidden;
  position: relative;
  display: block;
}

.nav span {
  -moz-transition-property: all;
  -o-transition-property: all;
  -webkit-transition-property: all;
  transition-property: all;
  -moz-transition-duration: 0.4s;
  -o-transition-duration: 0.4s;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
  -moz-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  position: absolute;
  width: 24px;
  height: 2px;
  background: #fff;
  top: 30px;
  left: 27px;
}

.nav span:first-child {
  top: 38px;
}

.nav span:last-child {
  top: 46px;
}

.clearBoth {
  clear: both;
}

.copyRight {
  color: #777;
  padding-bottom: 20px;
  line-height: 1.2em;
}

.iconfont, a.iconfont, i.iconfont {
  font-family: iconfont;
}

.iconPs::after {
  content: '\e642';
  margin-right: 8px;
}

.iconSketch::after {
  content: '\e68c';
  margin-right: 8px;
}

.iconXd::after {
  content: '\e61c';
  margin-right: 8px;
}

.iconColor::after {
  content: '\e628';
  margin-right: 8px;
}

.iconFigma::after {
  content: '\e6be';
  margin-right: 8px;
}

.iconB::after {
  content: '\e615';
  margin-right: 8px;
}

.iconTool::after {
  content: '\e6ba';
  margin-right: 8px;
}

.iconStudy::after {
  content: '\eb8b';
  margin-right: 8px;
}

.iconPic::after {
  content: '\e645';
  margin-right: 8px;
}

.iconDownload::after {
  content: '\e604';
  margin-right: 8px;
}

.iconJs::after {
  content: '\e601';
  margin-right: 8px;
}

.iconIcon::after {
  content: '\e92a';
  margin-right: 8px;
}

.iconIllustration::after {
  content: '\e766';
  margin-right: 8px;
}

.mockupIcon::after {
  content: '\eae5';
  margin-right: 8px;
}

.iconText::after {
  content: '\e610';
  margin-right: 8px;
}

html.blueSkin ::-webkit-scrollbar-track {
  background-color: #e3e3e3;
}

html.blueSkin ::-webkit-scrollbar-thumb {
  background-color: #bdbdbd;
}

html.blueSkin ::-webkit-scrollbar-thumb:hover {
  background-color: #bdbdbd;
}

html.blueSkin ::-webkit-scrollbar-thumb:active {
  background-color: #bdbdbd;
}

body.blueSkin {
  background: #efefef;
}

body.blueSkin div ::-webkit-scrollbar-track, body.blueSkin ::-webkit-scrollbar-track {
  background-color: #e3e3e3;
}

body.blueSkin div ::-webkit-scrollbar-thumb, body.blueSkin ::-webkit-scrollbar-thumb {
  background-color: #bdbdbd;
}

body.blueSkin div ::-webkit-scrollbar-thumb:hover, body.blueSkin ::-webkit-scrollbar-thumb:hover {
  background-color: #bdbdbd;
}

body.blueSkin div ::-webkit-scrollbar-thumb:active, body.blueSkin ::-webkit-scrollbar-thumb:active {
  background-color: #bdbdbd;
}

body.blueSkin .navHeader {
  background: #2562dc;
}

body.blueSkin .sideNav {
  background: #ffffff;
  -moz-box-shadow: 10px 0 10px rgba(0, 0, 0, 0.01);
  -webkit-box-shadow: 10px 0 10px rgba(0, 0, 0, 0.01);
  box-shadow: 10px 0 10px rgba(0, 0, 0, 0.01);
}

body.blueSkin .sideNav .logo {
  background: #2562dc;
}

body.blueSkin .sideNav .logo .iconfont {
  color: #fff;
}

body.blueSkin .sideNav .logo .slogen {
  color: rgba(255, 255, 255, 0.5);
}

body.blueSkin .sideNav a {
  color: #333;
  border-color: #e6e6e6;
  border-style: dashed;
}

body.blueSkin .sideNav .iconfont {
  color: #777;
}

body.blueSkin .sideNav li:hover {
  background: #e9f7ff;
}

body.blueSkin h3 {
  color: #333;
}

body.blueSkin .listItem {
  background: #fff;
  color: #999;
}

body.blueSkin .listItem p.itemTitle {
  color: #444;
}

body.blueSkin .listItem:hover {
  -moz-box-shadow: 0 26px 40px -24px rgba(183, 227, 250, 0.3);
  -webkit-box-shadow: 0 26px 40px -24px rgba(183, 227, 250, 0.3);
  box-shadow: 0 26px 40px -24px rgba(183, 227, 250, 0.3);
}

body.blueSkin .sideNav .current a {
  color: #2562dc;
}

body.blueSkin .sideNav .current::after {
  background: #2562dc;
}

body.blueSkin .sideNav .current .iconfont {
  color: #2562dc;
}

body.blueSkin .nav:hover {
  background: rgba(255, 255, 255, 0.05);
}

html.darkSkin ::-webkit-scrollbar-track {
  background-color: #10161f;
}

html.darkSkin ::-webkit-scrollbar-thumb {
  background-color: #1e2f47;
}

html.darkSkin ::-webkit-scrollbar-thumb:hover {
  background-color: #1e2f47;
}

html.darkSkin ::-webkit-scrollbar-thumb:active {
  background-color: #1e2f47;
}

body.darkSkin {
  background: #151d27;
}

body.darkSkin div ::-webkit-scrollbar-track, body.darkSkin ::-webkit-scrollbar-track {
  background-color: #10161f;
}

body.darkSkin div ::-webkit-scrollbar-thumb, body.darkSkin ::-webkit-scrollbar-thumb {
  background-color: #1e2f47;
}

body.darkSkin div ::-webkit-scrollbar-thumb:hover, body.darkSkin ::-webkit-scrollbar-thumb:hover {
  background-color: #1e2f47;
}

body.darkSkin div ::-webkit-scrollbar-thumb:active, body.darkSkin ::-webkit-scrollbar-thumb:active {
  background-color: #1e2f47;
}

body.darkSkin .navHeader {
  background: #1e2f47;
}

body.darkSkin .sideNav {
  background: #1a222e;
}

body.darkSkin .sideNav .logo {
  color: #00c8ff;
}

body.darkSkin .sideNav .logo .slogen {
  color: #6884ad;
}

body.darkSkin .sideNav a {
  color: #aec9f0;
  border-color: #171e28;
  border-style: solid;
}

body.darkSkin .sideNav li:hover {
  background: rgba(13, 117, 151, 0.2);
}

body.darkSkin .sideNav li:hover a {
  border-color: transparent;
}

body.darkSkin .sideNav .current {
  background: rgba(13, 117, 151, 0.2);
}

body.darkSkin .sideNav .current a {
  color: #00c8ff;
  border-color: transparent;
}

body.darkSkin .sideNav .current::after {
  background: #00c8ff;
}

body.darkSkin .listItem {
  background-image: url('');
  background-size: 100%;
  background-image: -moz-linear-gradient(120deg, #151d27 5px, #1a222e 6px, #1a222e 7px, #1a222e 192px, #151d27 193px);
  background-image: -webkit-linear-gradient(120deg, #151d27 5px, #1a222e 6px, #1a222e 7px, #1a222e 192px, #151d27 193px);
  background-image: linear-gradient(-30deg, #151d27 5px, #1a222e 6px, #1a222e 7px, #1a222e 192px, #151d27 193px);
  color: #6884ad;
}

body.darkSkin .listItem p.itemTitle {
  color: #aec9f0;
}

body.darkSkin .listItem:hover {
  background-image: url('');
  background-size: 100%;
  background-image: -moz-linear-gradient(120deg, #151d27 5px, #1a222e 6px, #232e3e 7px, #232e3e 192px, #151d27 193px);
  background-image: -webkit-linear-gradient(120deg, #151d27 5px, #1a222e 6px, #232e3e 7px, #232e3e 192px, #151d27 193px);
  background-image: linear-gradient(-30deg, #151d27 5px, #1a222e 6px, #232e3e 7px, #232e3e 192px, #151d27 193px);
}

body.darkSkin h3 {
  color: #00c8ff;
}

body.darkSkin .nav:hover {
  background: rgba(13, 117, 151, 0.2);
}

body.darkSkin .nav:hover span {
  background: #00c8ff;
}

body.darkSkin .nav span {
  background: #aec9f0;
}

body.darkSkin .copyRight {
  color: #35465e;
}

.navHeader .line {
  width: 2px;
  height: 16px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.2);
  margin-right: 15px;
}

.navHeader .aboutUs {
  padding-right: 15px;
  font-size: 14px;
  color: #fff;
}

.navHeader .aboutUs:hover {
  color: #ff0;
}

.navHeader a.blueSkin, .navHeader a.darkSkin, .navHeader a.blackSkin, .navHeader a.nightSkin {
  width: 20px;
  height: 20px;
  border: 2px solid #0d151f;
  background: #0d7597;
  margin-left: 5px;
}

.navHeader a.blueSkin:hover, .navHeader a.darkSkin:hover, .navHeader a.blackSkin:hover, .navHeader a.nightSkin:hover {
  border-color: #fff;
}

.navHeader a.blueSkin {
  background: #2562dc;
}

.navHeader a.blackSkin {
  background: #3d4044;
}

.navHeader a.nightSkin {
  background: #000;
}

.navHeader a.selected {
  border-color: #fff;
}

body.nightSkin {
  background: #000000;
}

body.nightSkin .navHeader {
  background: #101216;
}

body.nightSkin .sideNav {
  background: #202327;
}

body.nightSkin .sideNav .logo .slogen {
  color: #6E767D;
}

body.nightSkin .sideNav a {
  color: #A8B2BA;
  border-color: #14171b;
}

body.nightSkin .sideNav li:hover {
  background: #101216;
}

body.nightSkin .sideNav .current a {
  color: #fff;
}

body.nightSkin .listItem {
  color: #A8B2BA;
  background: #15181d;
}

body.nightSkin .listItem p.itemTitle {
  color: #D9D9D9;
}

body.nightSkin .listItem:hover {
  background: #20242c;
}

body.nightSkin h3 {
  color: #D9D9D9;
}

body.nightSkin .nav:hover {
  background: rgba(255, 255, 255, 0.05);
}

body.nightSkin .copyRight {
  color: #3A4249;
}

html.wh_100, body.wh_100 {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.wh_body {
  font-family: 'Fira Sans', sans-serif, PingFangSC-Regular;
  font-weight: 300;
  background: #2562dc;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.wh_body .wh_theader {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-align-self: center;
  align-self: center;
}

.wh_body .wh_theader a {
  -moz-transition-property: all;
  -o-transition-property: all;
  -webkit-transition-property: all;
  transition-property: all;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-flex-direction: column;
  flex-direction: column;
  font-size: 22px;
  padding: 20px 32px 20px;
  margin-right: 2px;
  border-bottom: 4px solid transparent;
  color: #fff;
}

.wh_body .wh_theader a.selected {
  border-color: #00ffff;
  background: rgba(255, 255, 255, 0.1);
}

.wh_body .wh_theader a:hover {
  background: rgba(255, 255, 255, 0.05);
}

.wh_body .wh_theader a.customize {
  display: -webkit-flex;
  display: flex;
  -webkit-align-self: center;
  align-self: center;
  text-align: center;
}

.wh_body .wh_theader a.customize span {
  font-size: 12px;
  line-height: 1em;
}

.wh_body .wh_theader #customize {
  font-size: 14px;
  padding-top: 2px;
}

.wh_body .wh_theader #settings {
  font-size: 20px;
  -moz-transition-property: all;
  -o-transition-property: all;
  -webkit-transition-property: all;
  transition-property: all;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-flex-direction: column;
  flex-direction: column;
  padding: 20px 10px 20px;
  color: #fff;
  cursor: pointer;
}

.wh_body .wh_theader #settings:hover {
  color: #00ffff;
  background: rgba(255, 255, 255, 0.05);
}

.wh_body .wh_middle {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-justify-content: center;
  justify-content: center;
  margin-top: 100px;
}

.wh_body .wh_middle .wh_middleInner {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  align-items: center;
  position: relative;
  color: #fff;
  font-size: 20px;
  padding: 60px 0px;
}

.wh_body .wh_middle .wh_middleInner span {
  padding-bottom: 10px;
}

.wh_body .wh_middle .wh_middleInner span.spanBlur {
  color: #00ffff;
  font-weight: 400;
}

.wh_body .wh_middle .wh_middleInner input[type=text] {
  width: 400px;
  text-align: center;
  font-size: 50px;
  font-weight: 700;
  background: transparent;
  border: none;
  color: #fff;
  outline: none;
}

.wh_body .wh_middle .wh_middleInner input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.wh_body .wh_middle .wh_widthClose {
  border-right: 1px solid rgba(255, 255, 255, 0.3);
}

.wh_body .wh_middle .wh_widthClose::after {
  color: #fff;
  content: '×';
  display: block;
  width: 48px;
  height: 48px;
  background: #2562dc;
  position: absolute;
//top: 50%;
//right: -24px;
//margin-left: -24px;
//margin-top: -24px;
  text-align: center;
  font-size: 24px;
  line-height: 2em;
}

.wh_body .wh_tfooter {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-align-self: center;
  align-self: center;
  padding: 30px 0px;
  color: #fff;
}

.wh_body .wh_tfooter a {
  padding: 0px 10px;
  color: #00ffff;
}

.wh_body .wh_tfooter a:hover {
  color: #0cc;
}

.settingWindow {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: rgba(37, 98, 220, 0.9);
  display: none;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  color: #fff;
}

.settingWindow p {
  font-size: 14px;
  line-height: 1.4em;
}

.settingWindow .settingsWindowInner {
  width: 100%;
  height: 100%;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
}

.settingWindow .settingsWindowInner input[type=text] {
  width: 260px;
  text-align: center;
  font-size: 50px;
  font-weight: 700;
  background: transparent;
  border: none;
  border-bottom: 1px solid #eee;
  color: #fff;
  outline: none;
}

.settingWindow .settingsWindowInner .maohao {
  color: #fff;
  font-size: 22px;
  padding: 0px 10px;
  font-size: 40px;
  font-weight: 700;
}

.settingWindow .wh_ok, .settingWindow .wh_cancel {
  padding: 14px 46px;
  background: #00ffff;
  color: #042c3b;
  font-weight: 700;
  margin: 20px 8px 0px;
  font-size: 20px;
  border-radius: 4px;
}

.settingWindow .wh_ok:hover, .settingWindow .wh_cancel:hover {
  background: #00e6e6;
}

.settingWindow .wh_cancel {
  font-weight: 300;
  color: #fff;
  background: rgba(255, 255, 255, 0.5);
}

.settingWindow .wh_cancel:hover {
  background: rgba(242, 242, 242, 0.5);
}

.putSearch {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  padding-top: 10px;
}

.putSearch form {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-align-items: center;
  align-items: center;
}

.putSearch .searchInput {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 42px;
  padding: 9px 20px;
  border: 1px solid #3d4044;
  background: #3d4044;
  border-right: none;
  width: 460px;
  color: #fff;
}

.putSearch .searchInput ::placeholder {
  color: #2b3a4f;
}

.putSearch .searchBtn {
  font-size: 16px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 42px;
  padding: 0px 24px;
  color: #fff;
  background: #2a85fc;
  border: none;
  cursor: pointer;
  background-image: url('');
  background-size: 100%;
  background-image: -moz-linear-gradient(135deg, #26282a 5px, #313437 6px, #313437 7px, #313437 192px, #313437 193px);
  background-image: -webkit-linear-gradient(135deg, #26282a 5px, #313437 6px, #313437 7px, #313437 192px, #313437 193px);
  background-image: linear-gradient(-45deg, #26282a 5px, #313437 6px, #313437 7px, #313437 192px, #313437 193px);
}

.putSearch .searchBtn:hover {
  background-image: url('');
  background-size: 100%;
  background-image: -moz-linear-gradient(135deg, #26282a 5px, #cb5730 6px, #cb5730 7px, #cb5730 192px, #cb5730 193px);
  background-image: -webkit-linear-gradient(135deg, #26282a 5px, #cb5730 6px, #cb5730 7px, #cb5730 192px, #cb5730 193px);
  background-image: linear-gradient(-45deg, #26282a 5px, #cb5730 6px, #cb5730 7px, #cb5730 192px, #cb5730 193px);
}

.putSearch .searchBtn i {
  font-size: 16px;
}

body.blueSkin .searchInput {
  border-color: #2a85fc;
  background: #fff;
  color: #333;
}

body.blueSkin .searchInput ::placeholder {
  color: #999;
}

body.blueSkin .searchBtn {
  background-image: url('');
  background-size: 100%;
  background-image: -moz-linear-gradient(135deg, #efefef 5px, #2a85fc 6px, #2a85fc 7px, #2a85fc 192px, #2a85fc 193px);
  background-image: -webkit-linear-gradient(135deg, #efefef 5px, #2a85fc 6px, #2a85fc 7px, #2a85fc 192px, #2a85fc 193px);
  background-image: linear-gradient(-45deg, #efefef 5px, #2a85fc 6px, #2a85fc 7px, #2a85fc 192px, #2a85fc 193px);
}

body.blueSkin .searchBtn:hover {
  background-image: url('');
  background-size: 100%;
  background-image: -moz-linear-gradient(135deg, #efefef 5px, #2ba9fc 6px, #2ba9fc 7px, #2ba9fc 192px, #2ba9fc 193px);
  background-image: -webkit-linear-gradient(135deg, #efefef 5px, #2ba9fc 6px, #2ba9fc 7px, #2ba9fc 192px, #2ba9fc 193px);
  background-image: linear-gradient(-45deg, #efefef 5px, #2ba9fc 6px, #2ba9fc 7px, #2ba9fc 192px, #2ba9fc 193px);
}

body.darkSkin .searchInput {
  border-color: #1e2f47;
  background: #0d151f;
  color: #fff;
}

body.darkSkin .searchInput ::placeholder {
  color: #2b3a4f;
}

body.darkSkin .searchBtn {
  background-image: url('');
  background-size: 100%;
  background-image: -moz-linear-gradient(135deg, #151d27 5px, #cb5730 6px, #cb5730 7px, #cb5730 192px, #cb5730 193px);
  background-image: -webkit-linear-gradient(135deg, #151d27 5px, #cb5730 6px, #cb5730 7px, #cb5730 192px, #cb5730 193px);
  background-image: linear-gradient(-45deg, #151d27 5px, #cb5730 6px, #cb5730 7px, #cb5730 192px, #cb5730 193px);
}

body.darkSkin .searchBtn:hover {
  background-image: url('');
  background-size: 100%;
  background-image: -moz-linear-gradient(135deg, #151d27 5px, #00c8ff 6px, #00c8ff 7px, #00c8ff 192px, #00c8ff 193px);
  background-image: -webkit-linear-gradient(135deg, #151d27 5px, #00c8ff 6px, #00c8ff 7px, #00c8ff 192px, #00c8ff 193px);
  background-image: linear-gradient(-45deg, #151d27 5px, #00c8ff 6px, #00c8ff 7px, #00c8ff 192px, #00c8ff 193px);
}

body.nightSkin .searchInput {
  border-color: #292929;
  background: #101216;
  color: #fff;
}

body.nightSkin .searchInput ::placeholder {
  color: #2b3a4f;
}

body.nightSkin .searchBtn {
  background-image: url('');
  background-size: 100%;
  background-image: -moz-linear-gradient(135deg, #000000 5px, #303030 6px, #303030 7px, #303030 192px, #303030 193px);
  background-image: -webkit-linear-gradient(135deg, #000000 5px, #303030 6px, #303030 7px, #303030 192px, #303030 193px);
  background-image: linear-gradient(-45deg, #000000 5px, #303030 6px, #303030 7px, #303030 192px, #303030 193px);
}

body.nightSkin .searchBtn:hover {
  background-image: url('');
  background-size: 100%;
  background-image: -moz-linear-gradient(135deg, #000000 5px, #cb5730 6px, #cb5730 7px, #cb5730 192px, #cb5730 193px);
  background-image: -webkit-linear-gradient(135deg, #000000 5px, #cb5730 6px, #cb5730 7px, #cb5730 192px, #cb5730 193px);
  background-image: linear-gradient(-45deg, #000000 5px, #cb5730 6px, #cb5730 7px, #cb5730 192px, #cb5730 193px);
}

.navWeChat {
  position: relative;
}

.navWeChat span {
  position: absolute;
  top: 20px;
  left: 0px;
  display: none;
  -moz-box-shadow: 0 26px 40px -24px rgba(2, 4, 6, 0.3);
  -webkit-box-shadow: 0 26px 40px -24px rgba(2, 4, 6, 0.3);
  box-shadow: 0 26px 40px -24px rgba(2, 4, 6, 0.3);
  padding: 10px;
  background: #49af2a;
}

.navWeChat span p {
  text-align: center;
  color: #fff;
  font-size: 14px;
}

.navWeChat:hover span {
  display: block;
}

body.columnBg {
  font-size: 16px;
  color: #0097ff;
  background-size: cover;
}

body.columnBg .w100Percent {
  width: 100%;
}

body.columnBg .columnTitle {
  width: 100%;
  height: 73px;
  position: relative;
}

body.columnBg .columnTitle .topLeft {
  position: absolute;
  top: 4px;
  left: 10px;
}

body.columnBg .columnTitle .topLeft a {
  font-size: 12px;
  padding: 10px 12px 10px;
  border: none;
  margin: 0;
  display: block;
}

body.columnBg .columnTitle .rightTop {
  position: absolute;
  top: 4px;
  right: 10px;
}

body.columnBg .columnTitle .rightTop a {
  font-size: 12px;
  padding: 10px 12px 10px;
  border: none;
  margin: 0;
  display: block;
}

body.columnBg .columnFlex {
  -webkit-flex-direction: column;
  flex-direction: column;
}

body.columnBg .columnTfooter {
  background: rgba(0, 0, 0, 0.9);
  padding: 10px 16px;
  border-radius: 20px;
}

body.columnBg .w960 {
  width: 960px;
  margin: 0 auto;
}

body.columnBg .w120 {
  width: 120px;
  text-align: right;
}

body.columnBg .w33percent {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 33%;
  padding: 8px 0px 8px 30px;
}

body.columnBg .w33percent input[type=text] {
  background: transparent;
  border: 2px solid #0097ff;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
}

body.columnBg .w33percent input[type=text].orangeTxt {
  color: #ff9900;
}

body.columnBg .w33percent input[type=text].highlightColor {
  color: #00fff6;
}

body.columnBg .w33percent input[type=text].blueTxt {
  color: #0097ff;
}

body.columnBg .w33percent .w100Input {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100px;
  padding: 4px 5px;
  height: 36px;
}

body.columnBg .hightlight {
  color: #00fff6;
}

body.columnBg .hightlight label {
  font-size: 20px;
  font-weight: 700;
}

body.columnBg .columnLine {
  height: 2px;
  background: #0050a8;
  width: 100%;
}

body.columnBg #allContent div {
  height: 140px;
  overflow: hidden;
  font-size: 12px;
  text-align: center;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}

body.columnBg .columnMargin {
  background: rgba(0, 0, 0, 0.4);
  color: #ff9900;
}

body.columnBg .columnColumn {
  background: rgba(0, 80, 168, 0.5);
  color: #fff;
}

body.columnBg .columnGutter {
  background: rgba(0, 0, 0, 0.4);
  color: #02dfdb;
}

body.columnBg .gutterGrow .columnGutter, body.columnBg .columnsGrow .columnColumn, body.columnBg .marginGrow .columnMargin {
  -moz-box-shadow: 0 0 10px #c33 inset;
  -webkit-box-shadow: 0 0 10px #c33 inset;
  box-shadow: 0 0 10px #c33 inset;
}

body.columnBg .whiteTxt {
  color: #fff;
}

body.columnBg .fz24 {
  font-size: 24px;
}

body.columnBg .blueTxt {
  color: #0097ff;
}

body.columnBg .alarm {
  color: #fff;
  background: #cc3333;
  padding: 10px 20px;
}

body.columnBg .redTxt {
  color: #c33;
}

body.columnBg .fz14 {
  font-size: 14px;
}

body.columnBg .blueDarkBg {
  background: rgba(0, 80, 168, 0.3);
}

.searchType {
  width: 566px;
  margin: 20px auto 0px;
}

.searchType dd {
  color: #999;
  cursor: pointer;
  display: inline-block;
  padding: 0px 0px 5px 0px;
  margin-right: 20px;
  border-bottom: 3px solid transparent;
}

.searchType dd.selected {
  color: #fff;
  border-bottom: 3px solid #fff;
  cursor: default;
}

.blueSkin .searchType dd {
  color: #999;
}

.blueSkin .searchType dd.selected {
  color: #444;
  border-color: #2562dc;
}

.darkSkin .searchType dd {
  color: #6884ad;
}

.darkSkin .searchType dd.selected {
  color: #aec9f0;
  border-color: #00c8ff;
}

.disabledSearch {
  pointer-events: none;
  opacity: 0.1;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}

q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

@font-face {
}

.padding5 {
  padding: 5px;
}

.margin5 {
  margin: 5px;
}

.pT5 {
  padding-top: 5px;
}

.pR5 {
  padding-right: 5px;
}

.pB5 {
  padding-bottom: 5px;
}

.pL5 {
  padding-left: 5px;
}

.mT5 {
  margin-top: 5px;
}

.mR5 {
  margin-right: 5px;
}

.mB5 {
  margin-bottom: 5px;
}

.mL5 {
  margin-left: 5px;
}

.padding1 {
  padding: 1px;
}

.margin1 {
  margin: 1px;
}

.pT1 {
  padding-top: 1px;
}

.pR1 {
  padding-right: 1px;
}

.pB1 {
  padding-bottom: 1px;
}

.pL1 {
  padding-left: 1px;
}

.mT1 {
  margin-top: 1px;
}

.mR1 {
  margin-right: 1px;
}

.mB1 {
  margin-bottom: 1px;
}

.mL1 {
  margin-left: 1px;
}

.padding2 {
  padding: 2px;
}

.margin2 {
  margin: 2px;
}

.pT2 {
  padding-top: 2px;
}

.pR2 {
  padding-right: 2px;
}

.pB2 {
  padding-bottom: 2px;
}

.pL2 {
  padding-left: 2px;
}

.mT2 {
  margin-top: 2px;
}

.mR2 {
  margin-right: 2px;
}

.mB2 {
  margin-bottom: 2px;
}

.mL2 {
  margin-left: 2px;
}

.padding15 {
  padding: 15px;
}

.margin15 {
  margin: 15px;
}

.pT15 {
  padding-top: 15px;
}

.pR15 {
  padding-right: 15px;
}

.pB15 {
  padding-bottom: 15px;
}

.pL15 {
  padding-left: 15px;
}

.mT15 {
  margin-top: 15px;
}

.mR15 {
  margin-right: 15px;
}

.mB15 {
  margin-bottom: 15px;
}

.mL15 {
  margin-left: 15px;
}

.padding3 {
  padding: 3px;
}

.margin3 {
  margin: 3px;
}

.pT3 {
  padding-top: 3px;
}

.pR3 {
  padding-right: 3px;
}

.pB3 {
  padding-bottom: 3px;
}

.pL3 {
  padding-left: 3px;
}

.mT3 {
  margin-top: 3px;
}

.mR3 {
  margin-right: 3px;
}

.mB3 {
  margin-bottom: 3px;
}

.mL3 {
  margin-left: 3px;
}

.padding4 {
  padding: 4px;
}

.margin4 {
  margin: 4px;
}

.pT4 {
  padding-top: 4px;
}

.pR4 {
  padding-right: 4px;
}

.pB4 {
  padding-bottom: 4px;
}

.pL4 {
  padding-left: 4px;
}

.mT4 {
  margin-top: 4px;
}

.mR4 {
  margin-right: 4px;
}

.mB4 {
  margin-bottom: 4px;
}

.mL4 {
  margin-left: 4px;
}

.padding25 {
  padding: 25px;
}

.margin25 {
  margin: 25px;
}

.pT25 {
  padding-top: 25px;
}

.pR25 {
  padding-right: 25px;
}

.pB25 {
  padding-bottom: 25px;
}

.pL25 {
  padding-left: 25px;
}

.mT25 {
  margin-top: 25px;
}

.mR25 {
  margin-right: 25px;
}

.mB25 {
  margin-bottom: 25px;
}

.mL25 {
  margin-left: 25px;
}

.padding5 {
  padding: 5px;
}

.margin5 {
  margin: 5px;
}

.pT5 {
  padding-top: 5px;
}

.pR5 {
  padding-right: 5px;
}

.pB5 {
  padding-bottom: 5px;
}

.pL5 {
  padding-left: 5px;
}

.mT5 {
  margin-top: 5px;
}

.mR5 {
  margin-right: 5px;
}

.mB5 {
  margin-bottom: 5px;
}

.mL5 {
  margin-left: 5px;
}

.padding6 {
  padding: 6px;
}

.margin6 {
  margin: 6px;
}

.pT6 {
  padding-top: 6px;
}

.pR6 {
  padding-right: 6px;
}

.pB6 {
  padding-bottom: 6px;
}

.pL6 {
  padding-left: 6px;
}

.mT6 {
  margin-top: 6px;
}

.mR6 {
  margin-right: 6px;
}

.mB6 {
  margin-bottom: 6px;
}

.mL6 {
  margin-left: 6px;
}

.padding35 {
  padding: 35px;
}

.margin35 {
  margin: 35px;
}

.pT35 {
  padding-top: 35px;
}

.pR35 {
  padding-right: 35px;
}

.pB35 {
  padding-bottom: 35px;
}

.pL35 {
  padding-left: 35px;
}

.mT35 {
  margin-top: 35px;
}

.mR35 {
  margin-right: 35px;
}

.mB35 {
  margin-bottom: 35px;
}

.mL35 {
  margin-left: 35px;
}

.padding7 {
  padding: 7px;
}

.margin7 {
  margin: 7px;
}

.pT7 {
  padding-top: 7px;
}

.pR7 {
  padding-right: 7px;
}

.pB7 {
  padding-bottom: 7px;
}

.pL7 {
  padding-left: 7px;
}

.mT7 {
  margin-top: 7px;
}

.mR7 {
  margin-right: 7px;
}

.mB7 {
  margin-bottom: 7px;
}

.mL7 {
  margin-left: 7px;
}

.padding8 {
  padding: 8px;
}

.margin8 {
  margin: 8px;
}

.pT8 {
  padding-top: 8px;
}

.pR8 {
  padding-right: 8px;
}

.pB8 {
  padding-bottom: 8px;
}

.pL8 {
  padding-left: 8px;
}

.mT8 {
  margin-top: 8px;
}

.mR8 {
  margin-right: 8px;
}

.mB8 {
  margin-bottom: 8px;
}

.mL8 {
  margin-left: 8px;
}

.padding45 {
  padding: 45px;
}

.margin45 {
  margin: 45px;
}

.pT45 {
  padding-top: 45px;
}

.pR45 {
  padding-right: 45px;
}

.pB45 {
  padding-bottom: 45px;
}

.pL45 {
  padding-left: 45px;
}

.mT45 {
  margin-top: 45px;
}

.mR45 {
  margin-right: 45px;
}

.mB45 {
  margin-bottom: 45px;
}

.mL45 {
  margin-left: 45px;
}

.padding9 {
  padding: 9px;
}

.margin9 {
  margin: 9px;
}

.pT9 {
  padding-top: 9px;
}

.pR9 {
  padding-right: 9px;
}

.pB9 {
  padding-bottom: 9px;
}

.pL9 {
  padding-left: 9px;
}

.mT9 {
  margin-top: 9px;
}

.mR9 {
  margin-right: 9px;
}

.mB9 {
  margin-bottom: 9px;
}

.mL9 {
  margin-left: 9px;
}

.padding10 {
  padding: 10px;
}

.margin10 {
  margin: 10px;
}

.pT10 {
  padding-top: 10px;
}

.pR10 {
  padding-right: 10px;
}

.pB10 {
  padding-bottom: 10px;
}

.pL10 {
  padding-left: 10px;
}

.mT10 {
  margin-top: 10px;
}

.mR10 {
  margin-right: 10px;
}

.mB10 {
  margin-bottom: 10px;
}

.mL10 {
  margin-left: 10px;
}

.padding55 {
  padding: 55px;
}

.margin55 {
  margin: 55px;
}

.pT55 {
  padding-top: 55px;
}

.pR55 {
  padding-right: 55px;
}

.pB55 {
  padding-bottom: 55px;
}

.pL55 {
  padding-left: 55px;
}

.mT55 {
  margin-top: 55px;
}

.mR55 {
  margin-right: 55px;
}

.mB55 {
  margin-bottom: 55px;
}

.mL55 {
  margin-left: 55px;
}

.padding11 {
  padding: 11px;
}

.margin11 {
  margin: 11px;
}

.pT11 {
  padding-top: 11px;
}

.pR11 {
  padding-right: 11px;
}

.pB11 {
  padding-bottom: 11px;
}

.pL11 {
  padding-left: 11px;
}

.mT11 {
  margin-top: 11px;
}

.mR11 {
  margin-right: 11px;
}

.mB11 {
  margin-bottom: 11px;
}

.mL11 {
  margin-left: 11px;
}

.padding12 {
  padding: 12px;
}

.margin12 {
  margin: 12px;
}

.pT12 {
  padding-top: 12px;
}

.pR12 {
  padding-right: 12px;
}

.pB12 {
  padding-bottom: 12px;
}

.pL12 {
  padding-left: 12px;
}

.mT12 {
  margin-top: 12px;
}

.mR12 {
  margin-right: 12px;
}

.mB12 {
  margin-bottom: 12px;
}

.mL12 {
  margin-left: 12px;
}

.padding65 {
  padding: 65px;
}

.margin65 {
  margin: 65px;
}

.pT65 {
  padding-top: 65px;
}

.pR65 {
  padding-right: 65px;
}

.pB65 {
  padding-bottom: 65px;
}

.pL65 {
  padding-left: 65px;
}

.mT65 {
  margin-top: 65px;
}

.mR65 {
  margin-right: 65px;
}

.mB65 {
  margin-bottom: 65px;
}

.mL65 {
  margin-left: 65px;
}

.padding13 {
  padding: 13px;
}

.margin13 {
  margin: 13px;
}

.pT13 {
  padding-top: 13px;
}

.pR13 {
  padding-right: 13px;
}

.pB13 {
  padding-bottom: 13px;
}

.pL13 {
  padding-left: 13px;
}

.mT13 {
  margin-top: 13px;
}

.mR13 {
  margin-right: 13px;
}

.mB13 {
  margin-bottom: 13px;
}

.mL13 {
  margin-left: 13px;
}

.padding14 {
  padding: 14px;
}

.margin14 {
  margin: 14px;
}

.pT14 {
  padding-top: 14px;
}

.pR14 {
  padding-right: 14px;
}

.pB14 {
  padding-bottom: 14px;
}

.pL14 {
  padding-left: 14px;
}

.mT14 {
  margin-top: 14px;
}

.mR14 {
  margin-right: 14px;
}

.mB14 {
  margin-bottom: 14px;
}

.mL14 {
  margin-left: 14px;
}

.padding75 {
  padding: 75px;
}

.margin75 {
  margin: 75px;
}

.pT75 {
  padding-top: 75px;
}

.pR75 {
  padding-right: 75px;
}

.pB75 {
  padding-bottom: 75px;
}

.pL75 {
  padding-left: 75px;
}

.mT75 {
  margin-top: 75px;
}

.mR75 {
  margin-right: 75px;
}

.mB75 {
  margin-bottom: 75px;
}

.mL75 {
  margin-left: 75px;
}

.padding15 {
  padding: 15px;
}

.margin15 {
  margin: 15px;
}

.pT15 {
  padding-top: 15px;
}

.pR15 {
  padding-right: 15px;
}

.pB15 {
  padding-bottom: 15px;
}

.pL15 {
  padding-left: 15px;
}

.mT15 {
  margin-top: 15px;
}

.mR15 {
  margin-right: 15px;
}

.mB15 {
  margin-bottom: 15px;
}

.mL15 {
  margin-left: 15px;
}

.padding16 {
  padding: 16px;
}

.margin16 {
  margin: 16px;
}

.pT16 {
  padding-top: 16px;
}

.pR16 {
  padding-right: 16px;
}

.pB16 {
  padding-bottom: 16px;
}

.pL16 {
  padding-left: 16px;
}

.mT16 {
  margin-top: 16px;
}

.mR16 {
  margin-right: 16px;
}

.mB16 {
  margin-bottom: 16px;
}

.mL16 {
  margin-left: 16px;
}

.padding85 {
  padding: 85px;
}

.margin85 {
  margin: 85px;
}

.pT85 {
  padding-top: 85px;
}

.pR85 {
  padding-right: 85px;
}

.pB85 {
  padding-bottom: 85px;
}

.pL85 {
  padding-left: 85px;
}

.mT85 {
  margin-top: 85px;
}

.mR85 {
  margin-right: 85px;
}

.mB85 {
  margin-bottom: 85px;
}

.mL85 {
  margin-left: 85px;
}

.padding17 {
  padding: 17px;
}

.margin17 {
  margin: 17px;
}

.pT17 {
  padding-top: 17px;
}

.pR17 {
  padding-right: 17px;
}

.pB17 {
  padding-bottom: 17px;
}

.pL17 {
  padding-left: 17px;
}

.mT17 {
  margin-top: 17px;
}

.mR17 {
  margin-right: 17px;
}

.mB17 {
  margin-bottom: 17px;
}

.mL17 {
  margin-left: 17px;
}

.padding18 {
  padding: 18px;
}

.margin18 {
  margin: 18px;
}

.pT18 {
  padding-top: 18px;
}

.pR18 {
  padding-right: 18px;
}

.pB18 {
  padding-bottom: 18px;
}

.pL18 {
  padding-left: 18px;
}

.mT18 {
  margin-top: 18px;
}

.mR18 {
  margin-right: 18px;
}

.mB18 {
  margin-bottom: 18px;
}

.mL18 {
  margin-left: 18px;
}

.padding95 {
  padding: 95px;
}

.margin95 {
  margin: 95px;
}

.pT95 {
  padding-top: 95px;
}

.pR95 {
  padding-right: 95px;
}

.pB95 {
  padding-bottom: 95px;
}

.pL95 {
  padding-left: 95px;
}

.mT95 {
  margin-top: 95px;
}

.mR95 {
  margin-right: 95px;
}

.mB95 {
  margin-bottom: 95px;
}

.mL95 {
  margin-left: 95px;
}

.padding19 {
  padding: 19px;
}

.margin19 {
  margin: 19px;
}

.pT19 {
  padding-top: 19px;
}

.pR19 {
  padding-right: 19px;
}

.pB19 {
  padding-bottom: 19px;
}

.pL19 {
  padding-left: 19px;
}

.mT19 {
  margin-top: 19px;
}

.mR19 {
  margin-right: 19px;
}

.mB19 {
  margin-bottom: 19px;
}

.mL19 {
  margin-left: 19px;
}

.padding20 {
  padding: 20px;
}

.margin20 {
  margin: 20px;
}

.pT20 {
  padding-top: 20px;
}

.pR20 {
  padding-right: 20px;
}

.pB20 {
  padding-bottom: 20px;
}

.pL20 {
  padding-left: 20px;
}

.mT20 {
  margin-top: 20px;
}

.mR20 {
  margin-right: 20px;
}

.mB20 {
  margin-bottom: 20px;
}

.mL20 {
  margin-left: 20px;
}

.pT0 {
  padding-top: 0px;
}

.pR0 {
  padding-right: 0px;
}

.pB0 {
  padding-bottom: 0px;
}

.pL0 {
  padding-left: 0px;
}

.mT0 {
  margin-top: 0px;
}

.mR0 {
  margin-right: 0px;
}

.mB0 {
  margin-bottom: 0px;
}

.mL0 {
  margin-left: 0px;
}

.pT10 {
  padding-top: 10px;
}

.pR10 {
  padding-right: 10px;
}

.pB10 {
  padding-bottom: 10px;
}

.pL10 {
  padding-left: 10px;
}

.mT10 {
  margin-top: 10px;
}

.mR10 {
  margin-right: 10px;
}

.mB10 {
  margin-bottom: 10px;
}

.mL10 {
  margin-left: 10px;
}

.pT20 {
  padding-top: 20px;
}

.pR20 {
  padding-right: 20px;
}

.pB20 {
  padding-bottom: 20px;
}

.pL20 {
  padding-left: 20px;
}

.mT20 {
  margin-top: 20px;
}

.mR20 {
  margin-right: 20px;
}

.mB20 {
  margin-bottom: 20px;
}

.mL20 {
  margin-left: 20px;
}

.pT30 {
  padding-top: 30px;
}

.pR30 {
  padding-right: 30px;
}

.pB30 {
  padding-bottom: 30px;
}

.pL30 {
  padding-left: 30px;
}

.mT30 {
  margin-top: 30px;
}

.mR30 {
  margin-right: 30px;
}

.mB30 {
  margin-bottom: 30px;
}

.mL30 {
  margin-left: 30px;
}

.pT40 {
  padding-top: 40px;
}

.pR40 {
  padding-right: 40px;
}

.pB40 {
  padding-bottom: 40px;
}

.pL40 {
  padding-left: 40px;
}

.mT40 {
  margin-top: 40px;
}

.mR40 {
  margin-right: 40px;
}

.mB40 {
  margin-bottom: 40px;
}

.mL40 {
  margin-left: 40px;
}

.pT50 {
  padding-top: 50px;
}

.pR50 {
  padding-right: 50px;
}

.pB50 {
  padding-bottom: 50px;
}

.pL50 {
  padding-left: 50px;
}

.mT50 {
  margin-top: 50px;
}

.mR50 {
  margin-right: 50px;
}

.mB50 {
  margin-bottom: 50px;
}

.mL50 {
  margin-left: 50px;
}

.pT60 {
  padding-top: 60px;
}

.pR60 {
  padding-right: 60px;
}

.pB60 {
  padding-bottom: 60px;
}

.pL60 {
  padding-left: 60px;
}

.mT60 {
  margin-top: 60px;
}

.mR60 {
  margin-right: 60px;
}

.mB60 {
  margin-bottom: 60px;
}

.mL60 {
  margin-left: 60px;
}

.pT70 {
  padding-top: 70px;
}

.pR70 {
  padding-right: 70px;
}

.pB70 {
  padding-bottom: 70px;
}

.pL70 {
  padding-left: 70px;
}

.mT70 {
  margin-top: 70px;
}

.mR70 {
  margin-right: 70px;
}

.mB70 {
  margin-bottom: 70px;
}

.mL70 {
  margin-left: 70px;
}

.pT80 {
  padding-top: 80px;
}

.pR80 {
  padding-right: 80px;
}

.pB80 {
  padding-bottom: 80px;
}

.pL80 {
  padding-left: 80px;
}

.mT80 {
  margin-top: 80px;
}

.mR80 {
  margin-right: 80px;
}

.mB80 {
  margin-bottom: 80px;
}

.mL80 {
  margin-left: 80px;
}

.pT90 {
  padding-top: 90px;
}

.pR90 {
  padding-right: 90px;
}

.pB90 {
  padding-bottom: 90px;
}

.pL90 {
  padding-left: 90px;
}

.mT90 {
  margin-top: 90px;
}

.mR90 {
  margin-right: 90px;
}

.mB90 {
  margin-bottom: 90px;
}

.mL90 {
  margin-left: 90px;
}

.pT100 {
  padding-top: 100px;
}

.pR100 {
  padding-right: 100px;
}

.pB100 {
  padding-bottom: 100px;
}

.pL100 {
  padding-left: 100px;
}

.mT100 {
  margin-top: 100px;
}

.mR100 {
  margin-right: 100px;
}

.mB100 {
  margin-bottom: 100px;
}

.mL100 {
  margin-left: 100px;
}

.pT110 {
  padding-top: 110px;
}

.pR110 {
  padding-right: 110px;
}

.pB110 {
  padding-bottom: 110px;
}

.pL110 {
  padding-left: 110px;
}

.mT110 {
  margin-top: 110px;
}

.mR110 {
  margin-right: 110px;
}

.mB110 {
  margin-bottom: 110px;
}

.mL110 {
  margin-left: 110px;
}

.pT120 {
  padding-top: 120px;
}

.pR120 {
  padding-right: 120px;
}

.pB120 {
  padding-bottom: 120px;
}

.pL120 {
  padding-left: 120px;
}

.mT120 {
  margin-top: 120px;
}

.mR120 {
  margin-right: 120px;
}

.mB120 {
  margin-bottom: 120px;
}

.mL120 {
  margin-left: 120px;
}

.pT130 {
  padding-top: 130px;
}

.pR130 {
  padding-right: 130px;
}

.pB130 {
  padding-bottom: 130px;
}

.pL130 {
  padding-left: 130px;
}

.mT130 {
  margin-top: 130px;
}

.mR130 {
  margin-right: 130px;
}

.mB130 {
  margin-bottom: 130px;
}

.mL130 {
  margin-left: 130px;
}

.pT140 {
  padding-top: 140px;
}

.pR140 {
  padding-right: 140px;
}

.pB140 {
  padding-bottom: 140px;
}

.pL140 {
  padding-left: 140px;
}

.mT140 {
  margin-top: 140px;
}

.mR140 {
  margin-right: 140px;
}

.mB140 {
  margin-bottom: 140px;
}

.mL140 {
  margin-left: 140px;
}

.pT150 {
  padding-top: 150px;
}

.pR150 {
  padding-right: 150px;
}

.pB150 {
  padding-bottom: 150px;
}

.pL150 {
  padding-left: 150px;
}

.mT150 {
  margin-top: 150px;
}

.mR150 {
  margin-right: 150px;
}

.mB150 {
  margin-bottom: 150px;
}

.mL150 {
  margin-left: 150px;
}

.pT160 {
  padding-top: 160px;
}

.pR160 {
  padding-right: 160px;
}

.pB160 {
  padding-bottom: 160px;
}

.pL160 {
  padding-left: 160px;
}

.mT160 {
  margin-top: 160px;
}

.mR160 {
  margin-right: 160px;
}

.mB160 {
  margin-bottom: 160px;
}

.mL160 {
  margin-left: 160px;
}

.pT170 {
  padding-top: 170px;
}

.pR170 {
  padding-right: 170px;
}

.pB170 {
  padding-bottom: 170px;
}

.pL170 {
  padding-left: 170px;
}

.mT170 {
  margin-top: 170px;
}

.mR170 {
  margin-right: 170px;
}

.mB170 {
  margin-bottom: 170px;
}

.mL170 {
  margin-left: 170px;
}

.pT180 {
  padding-top: 180px;
}

.pR180 {
  padding-right: 180px;
}

.pB180 {
  padding-bottom: 180px;
}

.pL180 {
  padding-left: 180px;
}

.mT180 {
  margin-top: 180px;
}

.mR180 {
  margin-right: 180px;
}

.mB180 {
  margin-bottom: 180px;
}

.mL180 {
  margin-left: 180px;
}

.pT190 {
  padding-top: 190px;
}

.pR190 {
  padding-right: 190px;
}

.pB190 {
  padding-bottom: 190px;
}

.pL190 {
  padding-left: 190px;
}

.mT190 {
  margin-top: 190px;
}

.mR190 {
  margin-right: 190px;
}

.mB190 {
  margin-bottom: 190px;
}

.mL190 {
  margin-left: 190px;
}

.pT200 {
  padding-top: 200px;
}

.pR200 {
  padding-right: 200px;
}

.pB200 {
  padding-bottom: 200px;
}

.pL200 {
  padding-left: 200px;
}

.mT200 {
  margin-top: 200px;
}

.mR200 {
  margin-right: 200px;
}

.mB200 {
  margin-bottom: 200px;
}

.mL200 {
  margin-left: 200px;
}

.pT210 {
  padding-top: 210px;
}

.pR210 {
  padding-right: 210px;
}

.pB210 {
  padding-bottom: 210px;
}

.pL210 {
  padding-left: 210px;
}

.mT210 {
  margin-top: 210px;
}

.mR210 {
  margin-right: 210px;
}

.mB210 {
  margin-bottom: 210px;
}

.mL210 {
  margin-left: 210px;
}

.pT220 {
  padding-top: 220px;
}

.pR220 {
  padding-right: 220px;
}

.pB220 {
  padding-bottom: 220px;
}

.pL220 {
  padding-left: 220px;
}

.mT220 {
  margin-top: 220px;
}

.mR220 {
  margin-right: 220px;
}

.mB220 {
  margin-bottom: 220px;
}

.mL220 {
  margin-left: 220px;
}

.pT230 {
  padding-top: 230px;
}

.pR230 {
  padding-right: 230px;
}

.pB230 {
  padding-bottom: 230px;
}

.pL230 {
  padding-left: 230px;
}

.mT230 {
  margin-top: 230px;
}

.mR230 {
  margin-right: 230px;
}

.mB230 {
  margin-bottom: 230px;
}

.mL230 {
  margin-left: 230px;
}

.pT240 {
  padding-top: 240px;
}

.pR240 {
  padding-right: 240px;
}

.pB240 {
  padding-bottom: 240px;
}

.pL240 {
  padding-left: 240px;
}

.mT240 {
  margin-top: 240px;
}

.mR240 {
  margin-right: 240px;
}

.mB240 {
  margin-bottom: 240px;
}

.mL240 {
  margin-left: 240px;
}

.pT250 {
  padding-top: 250px;
}

.pR250 {
  padding-right: 250px;
}

.pB250 {
  padding-bottom: 250px;
}

.pL250 {
  padding-left: 250px;
}

.mT250 {
  margin-top: 250px;
}

.mR250 {
  margin-right: 250px;
}

.mB250 {
  margin-bottom: 250px;
}

.mL250 {
  margin-left: 250px;
}

.pT260 {
  padding-top: 260px;
}

.pR260 {
  padding-right: 260px;
}

.pB260 {
  padding-bottom: 260px;
}

.pL260 {
  padding-left: 260px;
}

.mT260 {
  margin-top: 260px;
}

.mR260 {
  margin-right: 260px;
}

.mB260 {
  margin-bottom: 260px;
}

.mL260 {
  margin-left: 260px;
}

.pT270 {
  padding-top: 270px;
}

.pR270 {
  padding-right: 270px;
}

.pB270 {
  padding-bottom: 270px;
}

.pL270 {
  padding-left: 270px;
}

.mT270 {
  margin-top: 270px;
}

.mR270 {
  margin-right: 270px;
}

.mB270 {
  margin-bottom: 270px;
}

.mL270 {
  margin-left: 270px;
}

.pT280 {
  padding-top: 280px;
}

.pR280 {
  padding-right: 280px;
}

.pB280 {
  padding-bottom: 280px;
}

.pL280 {
  padding-left: 280px;
}

.mT280 {
  margin-top: 280px;
}

.mR280 {
  margin-right: 280px;
}

.mB280 {
  margin-bottom: 280px;
}

.mL280 {
  margin-left: 280px;
}

.pT290 {
  padding-top: 290px;
}

.pR290 {
  padding-right: 290px;
}

.pB290 {
  padding-bottom: 290px;
}

.pL290 {
  padding-left: 290px;
}

.mT290 {
  margin-top: 290px;
}

.mR290 {
  margin-right: 290px;
}

.mB290 {
  margin-bottom: 290px;
}

.mL290 {
  margin-left: 290px;
}

.pT300 {
  padding-top: 300px;
}

.pR300 {
  padding-right: 300px;
}

.pB300 {
  padding-bottom: 300px;
}

.pL300 {
  padding-left: 300px;
}

.mT300 {
  margin-top: 300px;
}

.mR300 {
  margin-right: 300px;
}

.mB300 {
  margin-bottom: 300px;
}

.mL300 {
  margin-left: 300px;
}

.pT310 {
  padding-top: 310px;
}

.pR310 {
  padding-right: 310px;
}

.pB310 {
  padding-bottom: 310px;
}

.pL310 {
  padding-left: 310px;
}

.mT310 {
  margin-top: 310px;
}

.mR310 {
  margin-right: 310px;
}

.mB310 {
  margin-bottom: 310px;
}

.mL310 {
  margin-left: 310px;
}

.pT320 {
  padding-top: 320px;
}

.pR320 {
  padding-right: 320px;
}

.pB320 {
  padding-bottom: 320px;
}

.pL320 {
  padding-left: 320px;
}

.mT320 {
  margin-top: 320px;
}

.mR320 {
  margin-right: 320px;
}

.mB320 {
  margin-bottom: 320px;
}

.mL320 {
  margin-left: 320px;
}

.pT330 {
  padding-top: 330px;
}

.pR330 {
  padding-right: 330px;
}

.pB330 {
  padding-bottom: 330px;
}

.pL330 {
  padding-left: 330px;
}

.mT330 {
  margin-top: 330px;
}

.mR330 {
  margin-right: 330px;
}

.mB330 {
  margin-bottom: 330px;
}

.mL330 {
  margin-left: 330px;
}

.pT340 {
  padding-top: 340px;
}

.pR340 {
  padding-right: 340px;
}

.pB340 {
  padding-bottom: 340px;
}

.pL340 {
  padding-left: 340px;
}

.mT340 {
  margin-top: 340px;
}

.mR340 {
  margin-right: 340px;
}

.mB340 {
  margin-bottom: 340px;
}

.mL340 {
  margin-left: 340px;
}

.pT350 {
  padding-top: 350px;
}

.pR350 {
  padding-right: 350px;
}

.pB350 {
  padding-bottom: 350px;
}

.pL350 {
  padding-left: 350px;
}

.mT350 {
  margin-top: 350px;
}

.mR350 {
  margin-right: 350px;
}

.mB350 {
  margin-bottom: 350px;
}

.mL350 {
  margin-left: 350px;
}

.pT360 {
  padding-top: 360px;
}

.pR360 {
  padding-right: 360px;
}

.pB360 {
  padding-bottom: 360px;
}

.pL360 {
  padding-left: 360px;
}

.mT360 {
  margin-top: 360px;
}

.mR360 {
  margin-right: 360px;
}

.mB360 {
  margin-bottom: 360px;
}

.mL360 {
  margin-left: 360px;
}

.pT370 {
  padding-top: 370px;
}

.pR370 {
  padding-right: 370px;
}

.pB370 {
  padding-bottom: 370px;
}

.pL370 {
  padding-left: 370px;
}

.mT370 {
  margin-top: 370px;
}

.mR370 {
  margin-right: 370px;
}

.mB370 {
  margin-bottom: 370px;
}

.mL370 {
  margin-left: 370px;
}

.pT380 {
  padding-top: 380px;
}

.pR380 {
  padding-right: 380px;
}

.pB380 {
  padding-bottom: 380px;
}

.pL380 {
  padding-left: 380px;
}

.mT380 {
  margin-top: 380px;
}

.mR380 {
  margin-right: 380px;
}

.mB380 {
  margin-bottom: 380px;
}

.mL380 {
  margin-left: 380px;
}

.pT390 {
  padding-top: 390px;
}

.pR390 {
  padding-right: 390px;
}

.pB390 {
  padding-bottom: 390px;
}

.pL390 {
  padding-left: 390px;
}

.mT390 {
  margin-top: 390px;
}

.mR390 {
  margin-right: 390px;
}

.mB390 {
  margin-bottom: 390px;
}

.mL390 {
  margin-left: 390px;
}

.pT400 {
  padding-top: 400px;
}

.pR400 {
  padding-right: 400px;
}

.pB400 {
  padding-bottom: 400px;
}

.pL400 {
  padding-left: 400px;
}

.mT400 {
  margin-top: 400px;
}

.mR400 {
  margin-right: 400px;
}

.mB400 {
  margin-bottom: 400px;
}

.mL400 {
  margin-left: 400px;
}

.w10 {
  width: 10px;
}

.fz10 {
  font-size: 10px;
  font-size: 10px !important;
}

.w20 {
  width: 20px;
}

.fz20 {
  font-size: 20px;
  font-size: 20px !important;
}

.w30 {
  width: 30px;
}

.fz30 {
  font-size: 30px;
  font-size: 30px !important;
}

.w40 {
  width: 40px;
}

.fz40 {
  font-size: 40px;
  font-size: 40px !important;
}

.w50 {
  width: 50px;
}

.fz50 {
  font-size: 50px;
  font-size: 50px !important;
}

.w60 {
  width: 60px;
}

.fz60 {
  font-size: 60px;
  font-size: 60px !important;
}

.w70 {
  width: 70px;
}

.fz70 {
  font-size: 70px;
  font-size: 70px !important;
}

.w80 {
  width: 80px;
}

.fz80 {
  font-size: 80px;
  font-size: 80px !important;
}

.w90 {
  width: 90px;
}

.fz90 {
  font-size: 90px;
  font-size: 90px !important;
}

.w100 {
  width: 100px;
}

.fz100 {
  font-size: 100px;
  font-size: 100px !important;
}

.w110 {
  width: 110px;
}

.fz110 {
  font-size: 110px;
  font-size: 110px !important;
}

.w120 {
  width: 120px;
}

.fz120 {
  font-size: 120px;
  font-size: 120px !important;
}

.w130 {
  width: 130px;
}

.fz130 {
  font-size: 130px;
  font-size: 130px !important;
}

.w140 {
  width: 140px;
}

.fz140 {
  font-size: 140px;
  font-size: 140px !important;
}

.w150 {
  width: 150px;
}

.fz150 {
  font-size: 150px;
  font-size: 150px !important;
}

.w160 {
  width: 160px;
}

.fz160 {
  font-size: 160px;
  font-size: 160px !important;
}

.w170 {
  width: 170px;
}

.fz170 {
  font-size: 170px;
  font-size: 170px !important;
}

.w180 {
  width: 180px;
}

.fz180 {
  font-size: 180px;
  font-size: 180px !important;
}

.w190 {
  width: 190px;
}

.fz190 {
  font-size: 190px;
  font-size: 190px !important;
}

.w200 {
  width: 200px;
}

.fz200 {
  font-size: 200px;
  font-size: 200px !important;
}

.w210 {
  width: 210px;
}

.fz210 {
  font-size: 210px;
  font-size: 210px !important;
}

.w220 {
  width: 220px;
}

.fz220 {
  font-size: 220px;
  font-size: 220px !important;
}

.w230 {
  width: 230px;
}

.fz230 {
  font-size: 230px;
  font-size: 230px !important;
}

.w240 {
  width: 240px;
}

.fz240 {
  font-size: 240px;
  font-size: 240px !important;
}

.w250 {
  width: 250px;
}

.fz250 {
  font-size: 250px;
  font-size: 250px !important;
}

.w260 {
  width: 260px;
}

.fz260 {
  font-size: 260px;
  font-size: 260px !important;
}

.w270 {
  width: 270px;
}

.fz270 {
  font-size: 270px;
  font-size: 270px !important;
}

.w280 {
  width: 280px;
}

.fz280 {
  font-size: 280px;
  font-size: 280px !important;
}

.w290 {
  width: 290px;
}

.fz290 {
  font-size: 290px;
  font-size: 290px !important;
}

.w300 {
  width: 300px;
}

.fz300 {
  font-size: 300px;
  font-size: 300px !important;
}

.w310 {
  width: 310px;
}

.fz310 {
  font-size: 310px;
  font-size: 310px !important;
}

.w320 {
  width: 320px;
}

.fz320 {
  font-size: 320px;
  font-size: 320px !important;
}

.w330 {
  width: 330px;
}

.fz330 {
  font-size: 330px;
  font-size: 330px !important;
}

.w340 {
  width: 340px;
}

.fz340 {
  font-size: 340px;
  font-size: 340px !important;
}

.w350 {
  width: 350px;
}

.fz350 {
  font-size: 350px;
  font-size: 350px !important;
}

.w360 {
  width: 360px;
}

.fz360 {
  font-size: 360px;
  font-size: 360px !important;
}

.w370 {
  width: 370px;
}

.fz370 {
  font-size: 370px;
  font-size: 370px !important;
}

.w380 {
  width: 380px;
}

.fz380 {
  font-size: 380px;
  font-size: 380px !important;
}

.w390 {
  width: 390px;
}

.fz390 {
  font-size: 390px;
  font-size: 390px !important;
}

.w400 {
  width: 400px;
}

.fz400 {
  font-size: 400px;
  font-size: 400px !important;
}

.w410 {
  width: 410px;
}

.fz410 {
  font-size: 410px;
  font-size: 410px !important;
}

.w420 {
  width: 420px;
}

.fz420 {
  font-size: 420px;
  font-size: 420px !important;
}

.w430 {
  width: 430px;
}

.fz430 {
  font-size: 430px;
  font-size: 430px !important;
}

.w440 {
  width: 440px;
}

.fz440 {
  font-size: 440px;
  font-size: 440px !important;
}

.w450 {
  width: 450px;
}

.fz450 {
  font-size: 450px;
  font-size: 450px !important;
}

.w460 {
  width: 460px;
}

.fz460 {
  font-size: 460px;
  font-size: 460px !important;
}

.w470 {
  width: 470px;
}

.fz470 {
  font-size: 470px;
  font-size: 470px !important;
}

.w480 {
  width: 480px;
}

.fz480 {
  font-size: 480px;
  font-size: 480px !important;
}

.w490 {
  width: 490px;
}

.fz490 {
  font-size: 490px;
  font-size: 490px !important;
}

.w500 {
  width: 500px;
}

.fz500 {
  font-size: 500px;
  font-size: 500px !important;
}

.w510 {
  width: 510px;
}

.fz510 {
  font-size: 510px;
  font-size: 510px !important;
}

.w520 {
  width: 520px;
}

.fz520 {
  font-size: 520px;
  font-size: 520px !important;
}

.w530 {
  width: 530px;
}

.fz530 {
  font-size: 530px;
  font-size: 530px !important;
}

.w540 {
  width: 540px;
}

.fz540 {
  font-size: 540px;
  font-size: 540px !important;
}

.w550 {
  width: 550px;
}

.fz550 {
  font-size: 550px;
  font-size: 550px !important;
}

.w560 {
  width: 560px;
}

.fz560 {
  font-size: 560px;
  font-size: 560px !important;
}

.w570 {
  width: 570px;
}

.fz570 {
  font-size: 570px;
  font-size: 570px !important;
}

.w580 {
  width: 580px;
}

.fz580 {
  font-size: 580px;
  font-size: 580px !important;
}

.w590 {
  width: 590px;
}

.fz590 {
  font-size: 590px;
  font-size: 590px !important;
}

.w600 {
  width: 600px;
}

.fz600 {
  font-size: 600px;
  font-size: 600px !important;
}

.w610 {
  width: 610px;
}

.fz610 {
  font-size: 610px;
  font-size: 610px !important;
}

.w620 {
  width: 620px;
}

.fz620 {
  font-size: 620px;
  font-size: 620px !important;
}

.w630 {
  width: 630px;
}

.fz630 {
  font-size: 630px;
  font-size: 630px !important;
}

.w640 {
  width: 640px;
}

.fz640 {
  font-size: 640px;
  font-size: 640px !important;
}

.w650 {
  width: 650px;
}

.fz650 {
  font-size: 650px;
  font-size: 650px !important;
}

.w660 {
  width: 660px;
}

.fz660 {
  font-size: 660px;
  font-size: 660px !important;
}

.w670 {
  width: 670px;
}

.fz670 {
  font-size: 670px;
  font-size: 670px !important;
}

.w680 {
  width: 680px;
}

.fz680 {
  font-size: 680px;
  font-size: 680px !important;
}

.w690 {
  width: 690px;
}

.fz690 {
  font-size: 690px;
  font-size: 690px !important;
}

.w700 {
  width: 700px;
}

.fz700 {
  font-size: 700px;
  font-size: 700px !important;
}

.w710 {
  width: 710px;
}

.fz710 {
  font-size: 710px;
  font-size: 710px !important;
}

.w720 {
  width: 720px;
}

.fz720 {
  font-size: 720px;
  font-size: 720px !important;
}

.w730 {
  width: 730px;
}

.fz730 {
  font-size: 730px;
  font-size: 730px !important;
}

.w740 {
  width: 740px;
}

.fz740 {
  font-size: 740px;
  font-size: 740px !important;
}

.w750 {
  width: 750px;
}

.fz750 {
  font-size: 750px;
  font-size: 750px !important;
}

.w760 {
  width: 760px;
}

.fz760 {
  font-size: 760px;
  font-size: 760px !important;
}

.w770 {
  width: 770px;
}

.fz770 {
  font-size: 770px;
  font-size: 770px !important;
}

.w780 {
  width: 780px;
}

.fz780 {
  font-size: 780px;
  font-size: 780px !important;
}

.w790 {
  width: 790px;
}

.fz790 {
  font-size: 790px;
  font-size: 790px !important;
}

.w800 {
  width: 800px;
}

.fz800 {
  font-size: 800px;
  font-size: 800px !important;
}

.w810 {
  width: 810px;
}

.fz810 {
  font-size: 810px;
  font-size: 810px !important;
}

.w820 {
  width: 820px;
}

.fz820 {
  font-size: 820px;
  font-size: 820px !important;
}

.w830 {
  width: 830px;
}

.fz830 {
  font-size: 830px;
  font-size: 830px !important;
}

.w840 {
  width: 840px;
}

.fz840 {
  font-size: 840px;
  font-size: 840px !important;
}

.w850 {
  width: 850px;
}

.fz850 {
  font-size: 850px;
  font-size: 850px !important;
}

.w860 {
  width: 860px;
}

.fz860 {
  font-size: 860px;
  font-size: 860px !important;
}

.w870 {
  width: 870px;
}

.fz870 {
  font-size: 870px;
  font-size: 870px !important;
}

.w880 {
  width: 880px;
}

.fz880 {
  font-size: 880px;
  font-size: 880px !important;
}

.w890 {
  width: 890px;
}

.fz890 {
  font-size: 890px;
  font-size: 890px !important;
}

.w900 {
  width: 900px;
}

.fz900 {
  font-size: 900px;
  font-size: 900px !important;
}

.w910 {
  width: 910px;
}

.fz910 {
  font-size: 910px;
  font-size: 910px !important;
}

.w920 {
  width: 920px;
}

.fz920 {
  font-size: 920px;
  font-size: 920px !important;
}

.w930 {
  width: 930px;
}

.fz930 {
  font-size: 930px;
  font-size: 930px !important;
}

.w940 {
  width: 940px;
}

.fz940 {
  font-size: 940px;
  font-size: 940px !important;
}

.w950 {
  width: 950px;
}

.fz950 {
  font-size: 950px;
  font-size: 950px !important;
}

.w960 {
  width: 960px;
}

.fz960 {
  font-size: 960px;
  font-size: 960px !important;
}

.w970 {
  width: 970px;
}

.fz970 {
  font-size: 970px;
  font-size: 970px !important;
}

.w980 {
  width: 980px;
}

.fz980 {
  font-size: 980px;
  font-size: 980px !important;
}

.w990 {
  width: 990px;
}

.fz990 {
  font-size: 990px;
  font-size: 990px !important;
}

.w1000 {
  width: 1000px;
}

.fz1000 {
  font-size: 1000px;
  font-size: 1000px !important;
}

div ::-webkit-scrollbar, body ::-webkit-scrollbar, html ::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

div ::-webkit-scrollbar-track, body ::-webkit-scrollbar-track, html ::-webkit-scrollbar-track {
  background-color: #4a4a4a;
}

div ::-webkit-scrollbar-thumb, body ::-webkit-scrollbar-thumb, html ::-webkit-scrollbar-thumb {
  background-color: #696969;
}

div ::-webkit-scrollbar-thumb:hover, body ::-webkit-scrollbar-thumb:hover, html ::-webkit-scrollbar-thumb:hover {
  background-color: #696969;
}

div ::-webkit-scrollbar-thumb:active, body ::-webkit-scrollbar-thumb:active, html ::-webkit-scrollbar-thumb:active {
  background-color: #696969;
}

.fz34 {
  font-size: 34px;
}

.pL26 {
  padding-left: 26px;
}

body {
  font-size: 12px;
  background: #26282a;
}

a {
  line-height: 1em;
  text-decoration: none;
  color: #ddd;
}

.rowFlex {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-align-items: center;
  align-items: center;
}

h3 {
  clear: both;
  font-size: 16px;
  color: #fff;
  font-weight: bold;
  line-height: 1em;
  padding: 40px 0px 10px 0px;
}

.listItem {
  -moz-transition-property: all;
  -o-transition-property: all;
  -webkit-transition-property: all;
  transition-property: all;
  -moz-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
  -moz-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-justify-content: start;
  justify-content: start;
  position: relative;
  top: 0;
  left: 0;
  width: 250px;
  height: 86px;
  overflow: hidden;
  float: left;
  background: #3d4044;
  margin-bottom: 20px;
  margin-right: 16px;
  padding: 16px;
}

.listItem img {
  margin-right: 10px;
}

.listItem p {
  line-height: 1.2em;
}

.listItem p.itemTitle {
  font-size: 14px;
  font-weight: bold;
  padding-bottom: 8px;
  color: #fff;
  line-height: 1em;
}

.listItem:hover {
  background: #494d51;
  -moz-box-shadow: 0 26px 40px -24px rgba(2, 4, 6, 0.3);
  -webkit-box-shadow: 0 26px 40px -24px rgba(2, 4, 6, 0.3);
  box-shadow: 0 26px 40px -24px rgba(2, 4, 6, 0.3);
  top: -8px;
}

.navHeader {
  -moz-transition-property: all;
  -o-transition-property: all;
  -webkit-transition-property: all;
  transition-property: all;
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -moz-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  height: 78px;
  background: #2c2e2f;
  position: fixed;
  top: 0;
  left: 240px;
  right: 0px;
  z-index: 2;
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.navHeader .weather {
  height: 40px;
  overflow: hidden;
}

.navHeader .whTool {
  padding-left: 10px;
}

.navHeader .whTool:hover {
  color: #fff;
}

.navBody {
  -moz-transition-property: all;
  -o-transition-property: all;
  -webkit-transition-property: all;
  transition-property: all;
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -moz-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  padding-top: 78px;
  padding-left: 280px;
  padding-right: 10px;
}

body.close .navHeader {
  left: 86px;
}

body.close .navHeader .nav span {
  width: 12px;
  -moz-transform: rotateZ(45deg) translate(12px, -7px);
  -ms-transform: rotateZ(45deg) translate(12px, -7px);
  -webkit-transform: rotateZ(45deg) translate(12px, -7px);
  transform: rotateZ(45deg) translate(12px, -7px);
}

body.close .navHeader .nav span:first-child {
  width: 24px;
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}

body.close .navHeader .nav span:last-child {
  width: 12px;
  -moz-transform: rotateZ(-45deg) translate(12px, 7px);
  -ms-transform: rotateZ(-45deg) translate(12px, 7px);
  -webkit-transform: rotateZ(-45deg) translate(12px, 7px);
  transform: rotateZ(-45deg) translate(12px, 7px);
}

body.close .navBody {
  padding-left: 126px;
}

body.close .sideNav {
  width: 86px;
}

body.close .sideNav li a {
  text-align: center;
}

body.close .sideNav li a i.iconfont {
  font-size: 20px;
}

body.close .sideNav li a i.iconfont::after {
  margin-right: 0;
}

body.close .closeHidden {
  display: none;
}

.sideNav {
  width: 240px;
  height: 100vh;
  overflow: auto;
  background: #2c2e2f;
  position: fixed;
  z-index: 2;
  -moz-box-shadow: 10px 0 10px rgba(0, 0, 0, 0.05);
  -webkit-box-shadow: 10px 0 10px rgba(0, 0, 0, 0.05);
  box-shadow: 10px 0 10px rgba(0, 0, 0, 0.05);
  -moz-transition-property: all;
  -o-transition-property: all;
  -webkit-transition-property: all;
  transition-property: all;
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -moz-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
}

.sideNav li {
  position: relative;
}

.sideNav .current a {
  color: #00ffff;
}

.sideNav .current::after {
  content: '';
  width: 3px;
  height: 14px;
  background: #0ff;
  position: absolute;
  top: 12px;
  right: -12px;
}

.sideNav a {
  -moz-transition-property: all;
  -o-transition-property: all;
  -webkit-transition-property: all;
  transition-property: all;
  -moz-transition-duration: 0.7s;
  -o-transition-duration: 0.7s;
  -webkit-transition-duration: 0.7s;
  transition-duration: 0.7s;
  -moz-transition-timing-function: linear;
  -o-transition-timing-function: linear;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  word-break: keep-all;
  white-space: nowrap;
  display: block;
  padding: 12px 0px;
  margin: 0 16px;
  border-bottom: 1px solid #313437;
  color: #ddd;
  font-size: 14px;
}

.sideNav a:hover {
  color: #00ffff;
}

.sideNav a i {
  -moz-transition-property: all;
  -o-transition-property: all;
  -webkit-transition-property: all;
  transition-property: all;
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -moz-transition-timing-function: ease;
  -o-transition-timing-function: ease;
  -webkit-transition-timing-function: ease;
  transition-timing-function: ease;
}

.sideNav .logo {
  width: 100%;
  height: 78px;
  overflow: hidden;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-align-items: center;
  align-items: center;
  margin-bottom: 20px;
  font-weight: bold;
  font-size: 16px;
  color: #fff;
  word-break: keep-all;
  white-space: nowrap;
}

.sideNav .logo .slogen {
  font-size: 12px;
  color: #777;
  padding-top: 4px;
  font-weight: normal;
}

.nav {
  width: 78px;
  height: 78px;
  overflow: hidden;
  position: relative;
  display: block;
}

.nav span {
  -moz-transition-property: all;
  -o-transition-property: all;
  -webkit-transition-property: all;
  transition-property: all;
  -moz-transition-duration: 0.4s;
  -o-transition-duration: 0.4s;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
  -moz-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  position: absolute;
  width: 24px;
  height: 2px;
  background: #fff;
  top: 30px;
  left: 27px;
}

.nav span:first-child {
  top: 38px;
}

.nav span:last-child {
  top: 46px;
}

.clearBoth {
  clear: both;
}

.copyRight {
  color: #777;
  padding-bottom: 20px;
  line-height: 1.2em;
}

.iconfont, a.iconfont, i.iconfont {
  font-family: iconfont;
}

.iconPs::after {
  content: '\e642';
  margin-right: 8px;
}

.iconSketch::after {
  content: '\e68c';
  margin-right: 8px;
}

.iconXd::after {
  content: '\e61c';
  margin-right: 8px;
}

.iconColor::after {
  content: '\e628';
  margin-right: 8px;
}

.iconFigma::after {
  content: '\e6be';
  margin-right: 8px;
}

.iconB::after {
  content: '\e615';
  margin-right: 8px;
}

.iconTool::after {
  content: '\e6ba';
  margin-right: 8px;
}

.iconStudy::after {
  content: '\eb8b';
  margin-right: 8px;
}

.iconPic::after {
  content: '\e645';
  margin-right: 8px;
}

.iconDownload::after {
  content: '\e604';
  margin-right: 8px;
}

.iconJs::after {
  content: '\e601';
  margin-right: 8px;
}

.iconIcon::after {
  content: '\e92a';
  margin-right: 8px;
}

.iconIllustration::after {
  content: '\e766';
  margin-right: 8px;
}

.mockupIcon::after {
  content: '\eae5';
  margin-right: 8px;
}

.iconText::after {
  content: '\e610';
  margin-right: 8px;
}

html.blueSkin ::-webkit-scrollbar-track {
  background-color: #e3e3e3;
}

html.blueSkin ::-webkit-scrollbar-thumb {
  background-color: #bdbdbd;
}

html.blueSkin ::-webkit-scrollbar-thumb:hover {
  background-color: #bdbdbd;
}

html.blueSkin ::-webkit-scrollbar-thumb:active {
  background-color: #bdbdbd;
}

body.blueSkin {
  background: #efefef;
}

body.blueSkin div ::-webkit-scrollbar-track, body.blueSkin ::-webkit-scrollbar-track {
  background-color: #e3e3e3;
}

body.blueSkin div ::-webkit-scrollbar-thumb, body.blueSkin ::-webkit-scrollbar-thumb {
  background-color: #bdbdbd;
}

body.blueSkin div ::-webkit-scrollbar-thumb:hover, body.blueSkin ::-webkit-scrollbar-thumb:hover {
  background-color: #bdbdbd;
}

body.blueSkin div ::-webkit-scrollbar-thumb:active, body.blueSkin ::-webkit-scrollbar-thumb:active {
  background-color: #bdbdbd;
}

body.blueSkin .navHeader {
  background: #2562dc;
}

body.blueSkin .sideNav {
  background: #ffffff;
  -moz-box-shadow: 10px 0 10px rgba(0, 0, 0, 0.01);
  -webkit-box-shadow: 10px 0 10px rgba(0, 0, 0, 0.01);
  box-shadow: 10px 0 10px rgba(0, 0, 0, 0.01);
}

body.blueSkin .sideNav .logo {
  background: #2562dc;
}

body.blueSkin .sideNav .logo .iconfont {
  color: #fff;
}

body.blueSkin .sideNav .logo .slogen {
  color: rgba(255, 255, 255, 0.5);
}

body.blueSkin .sideNav a {
  color: #333;
  border-color: #e6e6e6;
  border-style: dashed;
}

body.blueSkin .sideNav .iconfont {
  color: #777;
}

body.blueSkin .sideNav li:hover {
  background: #e9f7ff;
}

body.blueSkin h3 {
  color: #333;
}

body.blueSkin .listItem {
  background: #fff;
  color: #999;
}

body.blueSkin .listItem p.itemTitle {
  color: #444;
}

body.blueSkin .listItem:hover {
  -moz-box-shadow: 0 26px 40px -24px rgba(183, 227, 250, 0.3);
  -webkit-box-shadow: 0 26px 40px -24px rgba(183, 227, 250, 0.3);
  box-shadow: 0 26px 40px -24px rgba(183, 227, 250, 0.3);
}

body.blueSkin .sideNav .current a {
  color: #2562dc;
}

body.blueSkin .sideNav .current::after {
  background: #2562dc;
}

body.blueSkin .sideNav .current .iconfont {
  color: #2562dc;
}

body.blueSkin .nav:hover {
  background: rgba(255, 255, 255, 0.05);
}

html.darkSkin ::-webkit-scrollbar-track {
  background-color: #10161f;
}

html.darkSkin ::-webkit-scrollbar-thumb {
  background-color: #1e2f47;
}

html.darkSkin ::-webkit-scrollbar-thumb:hover {
  background-color: #1e2f47;
}

html.darkSkin ::-webkit-scrollbar-thumb:active {
  background-color: #1e2f47;
}

body.darkSkin {
  background: #151d27;
}

body.darkSkin div ::-webkit-scrollbar-track, body.darkSkin ::-webkit-scrollbar-track {
  background-color: #10161f;
}

body.darkSkin div ::-webkit-scrollbar-thumb, body.darkSkin ::-webkit-scrollbar-thumb {
  background-color: #1e2f47;
}

body.darkSkin div ::-webkit-scrollbar-thumb:hover, body.darkSkin ::-webkit-scrollbar-thumb:hover {
  background-color: #1e2f47;
}

body.darkSkin div ::-webkit-scrollbar-thumb:active, body.darkSkin ::-webkit-scrollbar-thumb:active {
  background-color: #1e2f47;
}

body.darkSkin .navHeader {
  background: #1e2f47;
}

body.darkSkin .sideNav {
  background: #1a222e;
}

body.darkSkin .sideNav .logo {
  color: #00c8ff;
}

body.darkSkin .sideNav .logo .slogen {
  color: #6884ad;
}

body.darkSkin .sideNav a {
  color: #aec9f0;
  border-color: #171e28;
  border-style: solid;
}

body.darkSkin .sideNav li:hover {
  background: rgba(13, 117, 151, 0.2);
}

body.darkSkin .sideNav li:hover a {
  border-color: transparent;
}

body.darkSkin .sideNav .current {
  background: rgba(13, 117, 151, 0.2);
}

body.darkSkin .sideNav .current a {
  color: #00c8ff;
  border-color: transparent;
}

body.darkSkin .sideNav .current::after {
  background: #00c8ff;
}

body.darkSkin .listItem {
  background-image: url('');
  background-size: 100%;
  background-image: -moz-linear-gradient(120deg, #151d27 5px, #1a222e 6px, #1a222e 7px, #1a222e 192px, #151d27 193px);
  background-image: -webkit-linear-gradient(120deg, #151d27 5px, #1a222e 6px, #1a222e 7px, #1a222e 192px, #151d27 193px);
  background-image: linear-gradient(-30deg, #151d27 5px, #1a222e 6px, #1a222e 7px, #1a222e 192px, #151d27 193px);
  color: #6884ad;
}

body.darkSkin .listItem p.itemTitle {
  color: #aec9f0;
}

body.darkSkin .listItem:hover {
  background-image: url('');
  background-size: 100%;
  background-image: -moz-linear-gradient(120deg, #151d27 5px, #1a222e 6px, #232e3e 7px, #232e3e 192px, #151d27 193px);
  background-image: -webkit-linear-gradient(120deg, #151d27 5px, #1a222e 6px, #232e3e 7px, #232e3e 192px, #151d27 193px);
  background-image: linear-gradient(-30deg, #151d27 5px, #1a222e 6px, #232e3e 7px, #232e3e 192px, #151d27 193px);
}

body.darkSkin h3 {
  color: #00c8ff;
}

body.darkSkin .nav:hover {
  background: rgba(13, 117, 151, 0.2);
}

body.darkSkin .nav:hover span {
  background: #00c8ff;
}

body.darkSkin .nav span {
  background: #aec9f0;
}

body.darkSkin .copyRight {
  color: #35465e;
}

.navHeader .line {
  width: 2px;
  height: 16px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.2);
  margin-right: 15px;
}

.navHeader .aboutUs {
  padding-right: 15px;
  font-size: 14px;
  color: #fff;
}

.navHeader .aboutUs:hover {
  color: #ff0;
}

.navHeader a.blueSkin, .navHeader a.darkSkin, .navHeader a.blackSkin, .navHeader a.nightSkin {
  width: 20px;
  height: 20px;
  border: 2px solid #0d151f;
  background: #0d7597;
  margin-left: 5px;
}

.navHeader a.blueSkin:hover, .navHeader a.darkSkin:hover, .navHeader a.blackSkin:hover, .navHeader a.nightSkin:hover {
  border-color: #fff;
}

.navHeader a.blueSkin {
  background: #2562dc;
}

.navHeader a.blackSkin {
  background: #3d4044;
}

.navHeader a.nightSkin {
  background: #000;
}

.navHeader a.selected {
  border-color: #fff;
}

body.nightSkin {
  background: #000000;
}

body.nightSkin .navHeader {
  background: #101216;
}

body.nightSkin .sideNav {
  background: #202327;
}

body.nightSkin .sideNav .logo .slogen {
  color: #6E767D;
}

body.nightSkin .sideNav a {
  color: #A8B2BA;
  border-color: #14171b;
}

body.nightSkin .sideNav li:hover {
  background: #101216;
}

body.nightSkin .sideNav .current a {
  color: #fff;
}

body.nightSkin .listItem {
  color: #A8B2BA;
  background: #15181d;
}

body.nightSkin .listItem p.itemTitle {
  color: #D9D9D9;
}

body.nightSkin .listItem:hover {
  background: #20242c;
}

body.nightSkin h3 {
  color: #D9D9D9;
}

body.nightSkin .nav:hover {
  background: rgba(255, 255, 255, 0.05);
}

body.nightSkin .copyRight {
  color: #3A4249;
}

html.wh_100, body.wh_100 {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.wh_body {
  font-family: 'Fira Sans', sans-serif, PingFangSC-Regular;
  font-weight: 300;
  background: #2562dc;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.wh_body .wh_theader {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-align-self: center;
  align-self: center;
}

.wh_body .wh_theader a {
  -moz-transition-property: all;
  -o-transition-property: all;
  -webkit-transition-property: all;
  transition-property: all;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-flex-direction: column;
  flex-direction: column;
  font-size: 22px;
  padding: 20px 32px 20px;
  margin-right: 2px;
  border-bottom: 4px solid transparent;
  color: #fff;
}

.wh_body .wh_theader a.selected {
  border-color: #00ffff;
  background: rgba(255, 255, 255, 0.1);
}

.wh_body .wh_theader a:hover {
  background: rgba(255, 255, 255, 0.05);
}

.wh_body .wh_theader a.customize {
  display: -webkit-flex;
  display: flex;
  -webkit-align-self: center;
  align-self: center;
  text-align: center;
}

.wh_body .wh_theader a.customize span {
  font-size: 12px;
  line-height: 1em;
}

.wh_body .wh_theader #customize {
  font-size: 14px;
  padding-top: 2px;
}

.wh_body .wh_theader #settings {
  font-size: 20px;
  -moz-transition-property: all;
  -o-transition-property: all;
  -webkit-transition-property: all;
  transition-property: all;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-flex-direction: column;
  flex-direction: column;
  padding: 20px 10px 20px;
  color: #fff;
  cursor: pointer;
}

.wh_body .wh_theader #settings:hover {
  color: #00ffff;
  background: rgba(255, 255, 255, 0.05);
}

.wh_body .wh_middle {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-justify-content: center;
  justify-content: center;
}

.wh_body .wh_middle .wh_middleInner {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  align-items: center;
  position: relative;
  color: #fff;
  font-size: 20px;
  padding: 60px 0px;
}

.wh_body .wh_middle .wh_middleInner span {
  padding-bottom: 10px;
}

.wh_body .wh_middle .wh_middleInner span.spanBlur {
  color: #00ffff;
  font-weight: 400;
}

.wh_body .wh_middle .wh_middleInner input[type=text] {
  width: 400px;
  text-align: center;
  font-size: 50px;
  font-weight: 700;
  background: transparent;
  border: none;
  color: #fff;
  outline: none;
}

.wh_body .wh_middle .wh_middleInner input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.wh_body .wh_middle .wh_widthClose {
  border-right: 1px solid rgba(255, 255, 255, 0.3);
}

.wh_body .wh_middle .wh_widthClose::after {
  font-family: iconfont;
  color: #fff;
  content: '';
  display: block;
  width: 48px;
  height: 48px;
  background: #2562dc;
  position: absolute;
  top: 50%;
  right: -24px;
  margin-left: -24px;
  margin-top: -24px;
  text-align: center;
  font-size: 24px;
  line-height: 2em;
}

.wh_body .wh_tfooter {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-align-self: center;
  align-self: center;
  padding: 30px 0px;
  color: #fff;
}

.wh_body .wh_tfooter a {
  padding: 0px 10px;
  color: #00ffff;
}

.wh_body .wh_tfooter a:hover {
  color: #0cc;
}

.settingWindow {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: rgba(37, 98, 220, 0.9);
  display: none;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  color: #fff;
}

.settingWindow p {
  font-size: 14px;
  line-height: 1.4em;
}

.settingWindow .settingsWindowInner {
  width: 100%;
  height: 100%;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
}

.settingWindow .settingsWindowInner input[type=text] {
  width: 260px;
  text-align: center;
  font-size: 50px;
  font-weight: 700;
  background: transparent;
  border: none;
  border-bottom: 1px solid #eee;
  color: #fff;
  outline: none;
}

.settingWindow .settingsWindowInner .maohao {
  color: #fff;
  font-size: 22px;
  padding: 0px 10px;
  font-size: 40px;
  font-weight: 700;
}

.settingWindow .wh_ok, .settingWindow .wh_cancel {
  padding: 14px 46px;
  background: #00ffff;
  color: #042c3b;
  font-weight: 700;
  margin: 20px 8px 0px;
  font-size: 20px;
  border-radius: 4px;
}

.settingWindow .wh_ok:hover, .settingWindow .wh_cancel:hover {
  background: #00e6e6;
}

.settingWindow .wh_cancel {
  font-weight: 300;
  color: #fff;
  background: rgba(255, 255, 255, 0.5);
}

.settingWindow .wh_cancel:hover {
  background: rgba(242, 242, 242, 0.5);
}

.putSearch {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  padding-top: 10px;
}

.putSearch form {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-align-items: center;
  align-items: center;
}

.putSearch .searchInput {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 42px;
  padding: 9px 20px;
  border: 1px solid #3d4044;
  background: #3d4044;
  border-right: none;
  width: 460px;
  color: #fff;
}

.putSearch .searchInput ::placeholder {
  color: #2b3a4f;
}

.putSearch .searchBtn {
  font-size: 16px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 42px;
  padding: 0px 24px;
  color: #fff;
  background: #2a85fc;
  border: none;
  cursor: pointer;
  background-image: url('');
  background-size: 100%;
  background-image: -moz-linear-gradient(135deg, #26282a 5px, #313437 6px, #313437 7px, #313437 192px, #313437 193px);
  background-image: -webkit-linear-gradient(135deg, #26282a 5px, #313437 6px, #313437 7px, #313437 192px, #313437 193px);
  background-image: linear-gradient(-45deg, #26282a 5px, #313437 6px, #313437 7px, #313437 192px, #313437 193px);
}

.putSearch .searchBtn:hover {
  background-image: url('');
  background-size: 100%;
  background-image: -moz-linear-gradient(135deg, #26282a 5px, #cb5730 6px, #cb5730 7px, #cb5730 192px, #cb5730 193px);
  background-image: -webkit-linear-gradient(135deg, #26282a 5px, #cb5730 6px, #cb5730 7px, #cb5730 192px, #cb5730 193px);
  background-image: linear-gradient(-45deg, #26282a 5px, #cb5730 6px, #cb5730 7px, #cb5730 192px, #cb5730 193px);
}

.putSearch .searchBtn i {
  font-size: 16px;
}

body.blueSkin .searchInput {
  border-color: #2a85fc;
  background: #fff;
  color: #333;
}

body.blueSkin .searchInput ::placeholder {
  color: #999;
}

body.blueSkin .searchBtn {
  background-image: url('');
  background-size: 100%;
  background-image: -moz-linear-gradient(135deg, #efefef 5px, #2a85fc 6px, #2a85fc 7px, #2a85fc 192px, #2a85fc 193px);
  background-image: -webkit-linear-gradient(135deg, #efefef 5px, #2a85fc 6px, #2a85fc 7px, #2a85fc 192px, #2a85fc 193px);
  background-image: linear-gradient(-45deg, #efefef 5px, #2a85fc 6px, #2a85fc 7px, #2a85fc 192px, #2a85fc 193px);
}

body.blueSkin .searchBtn:hover {
  background-image: url('');
  background-size: 100%;
  background-image: -moz-linear-gradient(135deg, #efefef 5px, #2ba9fc 6px, #2ba9fc 7px, #2ba9fc 192px, #2ba9fc 193px);
  background-image: -webkit-linear-gradient(135deg, #efefef 5px, #2ba9fc 6px, #2ba9fc 7px, #2ba9fc 192px, #2ba9fc 193px);
  background-image: linear-gradient(-45deg, #efefef 5px, #2ba9fc 6px, #2ba9fc 7px, #2ba9fc 192px, #2ba9fc 193px);
}

body.darkSkin .searchInput {
  border-color: #1e2f47;
  background: #0d151f;
  color: #fff;
}

body.darkSkin .searchInput ::placeholder {
  color: #2b3a4f;
}

body.darkSkin .searchBtn {
  background-image: url('');
  background-size: 100%;
  background-image: -moz-linear-gradient(135deg, #151d27 5px, #cb5730 6px, #cb5730 7px, #cb5730 192px, #cb5730 193px);
  background-image: -webkit-linear-gradient(135deg, #151d27 5px, #cb5730 6px, #cb5730 7px, #cb5730 192px, #cb5730 193px);
  background-image: linear-gradient(-45deg, #151d27 5px, #cb5730 6px, #cb5730 7px, #cb5730 192px, #cb5730 193px);
}

body.darkSkin .searchBtn:hover {
  background-image: url('');
  background-size: 100%;
  background-image: -moz-linear-gradient(135deg, #151d27 5px, #00c8ff 6px, #00c8ff 7px, #00c8ff 192px, #00c8ff 193px);
  background-image: -webkit-linear-gradient(135deg, #151d27 5px, #00c8ff 6px, #00c8ff 7px, #00c8ff 192px, #00c8ff 193px);
  background-image: linear-gradient(-45deg, #151d27 5px, #00c8ff 6px, #00c8ff 7px, #00c8ff 192px, #00c8ff 193px);
}

body.nightSkin .searchInput {
  border-color: #292929;
  background: #101216;
  color: #fff;
}

body.nightSkin .searchInput ::placeholder {
  color: #2b3a4f;
}

body.nightSkin .searchBtn {
  background-image: url('');
  background-size: 100%;
  background-image: -moz-linear-gradient(135deg, #000000 5px, #303030 6px, #303030 7px, #303030 192px, #303030 193px);
  background-image: -webkit-linear-gradient(135deg, #000000 5px, #303030 6px, #303030 7px, #303030 192px, #303030 193px);
  background-image: linear-gradient(-45deg, #000000 5px, #303030 6px, #303030 7px, #303030 192px, #303030 193px);
}

body.nightSkin .searchBtn:hover {
  background-image: url('');
  background-size: 100%;
  background-image: -moz-linear-gradient(135deg, #000000 5px, #cb5730 6px, #cb5730 7px, #cb5730 192px, #cb5730 193px);
  background-image: -webkit-linear-gradient(135deg, #000000 5px, #cb5730 6px, #cb5730 7px, #cb5730 192px, #cb5730 193px);
  background-image: linear-gradient(-45deg, #000000 5px, #cb5730 6px, #cb5730 7px, #cb5730 192px, #cb5730 193px);
}

.navWeChat {
  position: relative;
}

.navWeChat span {
  position: absolute;
  top: 20px;
  left: 0px;
  display: none;
  -moz-box-shadow: 0 26px 40px -24px rgba(2, 4, 6, 0.3);
  -webkit-box-shadow: 0 26px 40px -24px rgba(2, 4, 6, 0.3);
  box-shadow: 0 26px 40px -24px rgba(2, 4, 6, 0.3);
  padding: 10px;
  background: #49af2a;
}

.navWeChat span p {
  text-align: center;
  color: #fff;
  font-size: 14px;
}

.navWeChat:hover span {
  display: block;
}

body.columnBg {
  font-size: 16px;
  color: #0097ff;
  background-size: cover;
}

body.columnBg .w100Percent {
  width: 100%;
}

body.columnBg .columnTitle {
  width: 100%;
  height: 73px;
  position: relative;
}

body.columnBg .columnTitle .topLeft {
  position: absolute;
  top: 4px;
  left: 10px;
}

body.columnBg .columnTitle .topLeft a {
  font-size: 12px;
  padding: 10px 12px 10px;
  border: none;
  margin: 0;
  display: block;
}

body.columnBg .columnTitle .rightTop {
  position: absolute;
  top: 4px;
  right: 10px;
}

body.columnBg .columnTitle .rightTop a {
  font-size: 12px;
  padding: 10px 12px 10px;
  border: none;
  margin: 0;
  display: block;
}

body.columnBg .columnFlex {
  -webkit-flex-direction: column;
  flex-direction: column;
}

body.columnBg .columnTfooter {
  background: rgba(0, 0, 0, 0.9);
  padding: 10px 16px;
  border-radius: 20px;
}

body.columnBg .w960 {
  width: 960px;
  margin: 0 auto;
}

body.columnBg .w120 {
  width: 120px;
  text-align: right;
}

body.columnBg .w33percent {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 33%;
  padding: 8px 0px 8px 30px;
}

body.columnBg .w33percent input[type=text] {
  background: transparent;
  border: 2px solid #0097ff;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
}

body.columnBg .w33percent input[type=text].orangeTxt {
  color: #ff9900;
}

body.columnBg .w33percent input[type=text].highlightColor {
  color: #00fff6;
}

body.columnBg .w33percent input[type=text].blueTxt {
  color: #0097ff;
}

body.columnBg .w33percent .w100Input {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100px;
  padding: 4px 5px;
  height: 36px;
}

body.columnBg .hightlight {
  color: #00fff6;
}

body.columnBg .hightlight label {
  font-size: 20px;
  font-weight: 700;
}

body.columnBg .columnLine {
  height: 2px;
  background: #0050a8;
  width: 100%;
}

body.columnBg #allContent div {
  height: 140px;
  overflow: hidden;
  font-size: 12px;
  text-align: center;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}

body.columnBg .columnMargin {
  background: rgba(0, 0, 0, 0.4);
  color: #ff9900;
}

body.columnBg .columnColumn {
  background: rgba(0, 80, 168, 0.5);
  color: #fff;
}

body.columnBg .columnGutter {
  background: rgba(0, 0, 0, 0.4);
  color: #02dfdb;
}

body.columnBg .gutterGrow .columnGutter, body.columnBg .columnsGrow .columnColumn, body.columnBg .marginGrow .columnMargin {
  -moz-box-shadow: 0 0 10px #c33 inset;
  -webkit-box-shadow: 0 0 10px #c33 inset;
  box-shadow: 0 0 10px #c33 inset;
}

body.columnBg .whiteTxt {
  color: #fff;
}

body.columnBg .fz24 {
  font-size: 24px;
}

body.columnBg .blueTxt {
  color: #0097ff;
}

body.columnBg .alarm {
  color: #fff;
  background: #cc3333;
  padding: 10px 20px;
}

body.columnBg .redTxt {
  color: #c33;
}

body.columnBg .fz14 {
  font-size: 14px;
}

body.columnBg .blueDarkBg {
  background: rgba(0, 80, 168, 0.3);
}

.searchType {
  width: 566px;
  margin: 20px auto 0px;
}

.searchType dd {
  color: #999;
  cursor: pointer;
  display: inline-block;
  padding: 0px 0px 5px 0px;
  margin-right: 20px;
  border-bottom: 3px solid transparent;
}

.searchType dd.selected {
  color: #fff;
  border-bottom: 3px solid #fff;
  cursor: default;
}

.blueSkin .searchType dd {
  color: #999;
}

.blueSkin .searchType dd.selected {
  color: #444;
  border-color: #2562dc;
}

.darkSkin .searchType dd {
  color: #6884ad;
}

.darkSkin .searchType dd.selected {
  color: #aec9f0;
  border-color: #00c8ff;
}

.disabledSearch {
  pointer-events: none;
  opacity: 0.1;
}
</style>
